所以 – 有人可以指出一个可靠的方式来创建css,反应可以很好地扩展,并且当人们想要借用我的组件时,允许主持人.例如,
@H_301_3@<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这解释一切！
这就是样式组件的基本用法：
@H_301_3@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组件：
@H_301_3@// Use them like any other React component – except they're styled! <Wrapper> <Title>Hello World,this is my first styled component!</Title> </Wrapper>(如果你点击图片,你会得到一个现场操场)
当您将内插函数传递到标记的模板文字中时,我们会传递传递给组件的属性.这意味着你可以适应道具：
@H_301_3@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组件一样创建主要组件：
@H_301_3@<Button>Normal</Button> <Button primary>Primary</Button>现在来到主题方面.我们导出一个名为ThemeProvider的组件,您可以将主题传递给应用程序(或部分应用程序)并将其包装在：
@H_301_3@import { ThemeProvider } from 'styled-components'; const theme = { main: 'mediumseagreen',}; ReactDOM.render( <ThemeProvider theme={theme}> <MyApp /> </ThemeProvider>,myElem );现在,该ThemeProvider中的任何风格的组件,无论多么深刻的感谢上下文,将把这个主题注入道具.
这是一个可以推荐的按钮：
@H_301_3@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,我鼓励你检查,当然正常的文档也是一个很好的阅读.我们试图覆盖所有的基础,所以如果你看到任何你不喜欢的东西,或者你认为是缺失的,请立即让我们知道,我们将讨论！
