Архитектура CSS с React, которая также может быть тематикой

Ответ 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)

Ответ 2

Я не знаю, что это лучший способ. Я думаю, что это больше похоже на личное предпочтение. Я просто передам инструменты, которые я использую. То, что я использую, css-modules с postcss.

css-modules дает вам возможность создавать локальный идентификатор с глобальным уникальным именем для каждого из ваших классов CSS, а также включать модульный и многоразовый CSS! Вы также можете использовать postcss-modules-values для создания файла глобальных настроек, который содержит все переменные параметров. Чтобы вы могли изменить тему для своего сайта.

Вот как я структурирую компоненты. Каждый из моих компонентов будет иметь один файл css, который очень легко поддерживать или вносить изменения.

Здесь код для компонента Button.

function Button(props) {
  const className = props.className ? `${styles.button} ${props.className}` : styles.button;

  return (
    <button disabled={props.disabled} className={`${className}`} type="button" onClick={props.onClick}>
      {Children.toArray(props.children)}
    </button>
  );
}

Обратите внимание, что у меня есть классName для компонента, который позволяет другому компоненту проходить в классе для компонента кнопки. Так что, когда кто-то заимствует ваш компонент, он может расширить или переопределить стили ваших кнопок.

Если вам нужно создать настраиваемый веб-сайт, я также рекомендую использовать Less.js, который предоставляет предварительный просмотр в прямом эфире настраиваемого веб-сайта.