使用React的CSS架构也可以是主题

Question

我目前正在构建一个大型的React应用程序.Css,从未成为我的强项.但是现在CSS有了使用React的sass/cssNext/inline样式.我一直在使用BEM和sass,但是随着我的其他应用程序变得越来越大,甚至开始崩溃.特别是当你具有"重新皮肤"或"主题"的能力以外的主要配色方案等页面.

所以 - 有人可以指出一种经过验证的方法来创建具有可以扩展的反应的css,并且允许在人们想要借用我的组件时进行客户主题化.例如,

<MyComponent />
// this component has its styles but lets say Joe Schmoe wants be import 
// it? But, Joe wants to overlay his custom styles?
// Is there a new paradigm that allows for an overlay or reskin within the component?

甚至整个应用程序的想法可以在一段时间内换肤.我知道这是一个非常基本的问题,但每当我构建项目时,我的痛点似乎也是CSS - 所以我想知道什么是真正的.

Answer 1

直到最近,这还不是React世界中解决的问题.

我是ElementalUI的维护者之一,这是一个React组件库,我们在过去的6-12个月里一直在尝试所有不同的样式方式.(!)你说出来,我们已经尝试过了.(我在ReactNL主题演讲期间谈到了我对一些最受欢迎的图书馆的经历以及它们发生故障的地方)

问题是当前的样式库都没有内置的主题支持.你可以用非常hacky,非用户友好的方式对它们中的大多数进行,但是当你分发组件时,这不是你想要的,对吗？

这就是我们建造的原因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构建可分发组件的要点和方式!

我们目前有一个关于编写第三方组件库的 WIP 文档,我鼓励您查看,当然,正常文档也是一本很好的阅读材料.我们已经尝试覆盖所有基础,所以如果您发现任何您不喜欢或您认为遗失的内容,请立即告知我们,我们将进行讨论!

如果您有任何其他问题,请styled-components随时在此处回复或在Twitter上联系.(@mxstbr)