Ответ 1
Это было до недавнего времени не решенная проблема в мире реактивов.
Я один из разработчиков ElementalUI, библиотеки компонентов React, и мы тестировали все разные способы стилизации в течение последних 6-12 месяцев. (!) Вы называете это, мы это пробовали. (Я рассказывал о своих опытах с некоторыми из самых популярных библиотек во время ReactNL keynote и где они ломались)
Проблема заключается в том, что ни одна из существующих библиотек стилей не имеет встроенной поддержки для тематики. Вы можете сделать это с большинством из них очень взломанным, не удобным для пользователя способом, но это не то, что вы хотите, когда вы распространяете компонент, правильно?
Вот почему мы построили styled-components. styled-components имеет кучу интересных свойств, и один из них заключается в том, что тематика непосредственно встроена в библиотеку, что делает ее идеальным выбором для создания распределяемых компонентов!
Вот краткое объяснение, хотя я рекомендую вам ознакомиться с нашей документацией, которая объясняет все!
Вот как выглядит основное использование styled-components:
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;
`;
Эта переменная Wrapper теперь представляет собой компоненты React, которые вы можете отобразить:
// Use them like any other React component – except they're styled!
<Wrapper>
<Title>Hello World, this is my first styled component!</Title>
</Wrapper>
(если вы нажмете на изображение, вы получите живую площадку)
Когда вы передаете интерполированную функцию в тегированный тег шаблона, мы передаем вам свойства, переданные компоненту. Это означает, что вы можете адаптироваться к реквизитам:
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;
`;
Здесь мы создали компонент Button, который вы можете сделать primary как любой другой компонент React:
<Button>Normal</Button>
<Button primary>Primary</Button>
Теперь идет тематический аспект. Мы экспортируем компонент с именем ThemeProvider, который вы можете передать theme и обернуть свое приложение (или части приложения) в:
import { ThemeProvider } from 'styled-components';
const theme = {
main: 'mediumseagreen',
};
ReactDOM.render(
<ThemeProvider theme={theme}>
<MyApp />
</ThemeProvider>,
myElem
);
Теперь любой стилизованный компонент внутри этого ThemeProvider, независимо от того, насколько глубокий благодаря контексту, получит этот theme, введенный в реквизиты.
Это то, что будет выглядеть Button:
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… */
`;
Теперь ваш Button примет theme, он будет передан и изменит его стиль на основе этого! (вы также можете указать значения по умолчанию через defaultProps)
Это сущность styled-components и то, как она помогает создавать распределяемые компоненты!
У нас есть документ WAP о написании сторонних библиотек компонентов, который я бы рекомендовал вам проверить, и, конечно, нормальный документация также хорошо читается. Мы попытались охватить все базы, поэтому, если вы видите что-то, что вам не нравится или что вы считаете пропавшим без вести, немедленно сообщите нам, и мы обсудим!
Если у вас есть другие вопросы о styled-components, не стесняйтесь ответить здесь или обратитесь в Твиттер. (@mxstbr)
