To był do niedawna nie rozwiązany problem w świecie React.
Jestem jednym z opiekunów ElementalUI, biblioteki komponentów React, a my próbowaliśmy różnych stylów w ciągu ostatnich 6-12 miesięcy. (!) Wy nazywacie to, próbowaliśmy tego. (Opowiadałem o moich doświadczeniach z najpopularniejszymi bibliotekami podczas mojego ReactNL keynote i tam, gdzie się podziały)
Problem polega na tym, że żadna z obecnych bibliotek stylów nie ma wbudowanej obsługi motywów. Możesz to zrobić z większością z nich w bardzo hacky, nie przyjazny dla użytkownika sposób, ale to nie jest to czego chcesz, kiedy dystrybuujesz komponent, prawda?
Dlatego zbudowaliśmy styled-components. styled-components ma wiele interesujących właściwości, a jednym z nich jest to, że motywy są bezpośrednio wbudowane w bibliotekę, co czyni go idealnym wyborem do budowania komponentów do dystrybucji!
Oto krótkie wyjaśnienie, chociaż zachęcam do przejrzenia naszego documentation, który wyjaśnia wszystko!
To właśnie podstawowe użycie styled-components wygląda następująco:
import React from 'react';
import styled from 'styled-components';
// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
Ta zmienna, Wrapper, teraz React komponenty można uczynić:
// Use them like any other React component – except they're styled!
<Wrapper>
<Title>Hello World, this is my first styled component!</Title>
</Wrapper>
(jeśli klikasz na obraz, który otrzymasz na żywo)
Po przekazaniu funkcji interpolowanej do oznakowanego szablonu literału przekazujemy właściwości przekazane do komponentu. Oznacza to, że można dostosować do rekwizytów:
import styled from 'styled-components';
const Button = styled.button`
/* Adapt the colors based on primary prop */
background: ${props => props.primary ? 'palevioletred' : 'white'};
color: ${props => props.primary ? 'white' : 'palevioletred'};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
Tutaj stworzyliśmy komponent Button że można zrobić primary jak każdy inny komponent React:
<Button>Normal</Button>
<Button primary>Primary</Button>
Teraz przychodzi aspekt motywacyjny. Eksportujemy komponent o nazwie ThemeProvider że można zdać theme do i owinąć swoją aplikację (lub jego części aplikacji) w:
import { ThemeProvider } from 'styled-components';
const theme = {
main: 'mediumseagreen',
};
ReactDOM.render(
<ThemeProvider theme={theme}>
<MyApp />
</ThemeProvider>,
myElem
);
Teraz każdy stylizowany składnika w tym ThemeProvider, bez względu na to, jak głęboko dzięki kontekście będzie zdobądź ten theme wstrzyknięty do rekwizytów.
To co themable Button wyglądałby następująco:
import styled from 'styled-components';
const Button = styled.button`
/* Color the background and border with theme.main */
background: ${props => props.theme.main};
border: 2px solid ${props => props.theme.main};
/* …more styles here… */
`;
Teraz twój Button zajmie theme robi minęło i zmienić jego stylistyka oparta na tym! (można również podać wartości domyślne za pomocą defaultProps)
To jest sedno styled-components i jak pomaga w budowaniu komponentów do dystrybucji!
Mamy obecnie WIP doc about writing third-party component libraries, który zachęcam do wypróbowania, i oczywiście normalna dokumentacja to również dobra lektura. Próbowaliśmy objąć wszystkie podstawy, więc jeśli zauważysz coś, czego nie lubisz lub coś, czego uważasz, że brakuje, natychmiast daj nam znać, a my porozmawiamy!
Jeśli masz inne pytania na temat styled-components, odpowiedz tutaj lub skontaktuj się z nami na Twitterze. (@mxstbr)
W jaki sposób stylizujesz swój własny, niestandardowy komponent? Po prostu użyj przekładki div? – MoeSattler
Tak, używam ton stylowych komponentów na większy komponent. Coś takiego: const Btn = stylizowany.przycisk' style: tutaj; ' Przycisk const = (rekwizyty) => { powrotu ( {props.text} ); } –
mxstbr
w jaki sposób adresujesz rzeczywiste sprzężenie stylów w komponencie. Na przykład, powiedzmy, że wszystkie moje guziki mają teraz promień 5 pikseli, muszę przejść do nich wszystkich i ręcznie je zmienić. Czy też źle czytam twój post? Lub zapytania o media, jak z nich korzystasz? –