带有React的CSS架构也可以主题

我正在建立一个大型的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 – 所以我想知道什么是真正的工作.

直到最近,这个反应世界并不是一个解决的问题.

我是ElementalUI的维护者之一,一个React组件库,我们已经在过去6-12个月中尝试了所有不同的造型方式. (！)你命名,我们试过了. (我谈到了我在ReactNL keynote期间和一些最流行的图书馆的经历,在那里他们分手)

问题是,目前的样式库都没有内置的支持.你可以使用大多数用户非常方便的方式来实现,但这不是您分发组件时所需要的,对吗？

这就是为什么我们构建了styled-components.样式组件有一堆有趣的属性,其中之一是将主题直接内置到库中,使其成为构建可分发组件的完美选择！

这是简短的解释,虽然我鼓励你通过我们的documentation这解释一切！

这就是样式组件的基本用法：

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组件,您可以像任何其他React组件一样创建主要组件：

<Button>Normal</Button>
<Button primary>Primary</Button>

现在来到主题方面.我们导出一个名为ThemeProvider的组件,您可以将主题传递给应用程序(或部分应用程序)并将其包装在：

import { ThemeProvider } from 'styled-components';

const theme = {
  main: 'mediumseagreen',};

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <MyApp />
  </ThemeProvider>,myElem
);

现在,该ThemeProvider中的任何风格的组件,无论多么深刻的感谢上下文,将把这个主题注入道具.

这是一个可以推荐的按钮：

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… */
`;

现在你的按钮将采取它通过的主题,并根据它改变它的造型！ (您也可以通过defaultProps提供默认值)

这是风格组件的要点,以及如何帮助构建可分配的组件！

我们现在有一个WIP doc about writing third-party component libraries,我鼓励你检查,当然正常的文档也是一个很好的阅读.我们试图覆盖所有的基础,所以如果你看到任何你不喜欢的东西,或者你认为是缺失的,请立即让我们知道,我们将讨论！

如果您有关于样式组件的任何其他问题,请随时在这里回复或在Twitter上接触. (@mxstbr)

带有React的CSS架构也可以主题

相关推荐