在样式组件中设置变量答案

【问题标题】：Setting variable in styled-components在样式组件中设置变量
【发布时间】：2018-05-09 07:06:52
【问题描述】：

我有一个在 CSS 声明块中多次使用的 prop 值。

是否可以将其设置为最初的变量以完成 DRY:er 代码？

以下是一个简单的示例，以显示我正在寻找的内容。但这不起作用 - 变量 size 稍后无法访问：

const Link = styled.a`
    ${props => {const size = props.size}};
    background-color: ${size === 'medium' ? 'palevioletred' : 'black'};
    width: 100%;
`;

【问题讨论】：

标签： javascript reactjs ecmascript-6 styled-components template-literals

【解决方案1】：

大声思考。创建一个接受一些设置并返回样式的函数。

没有测试这个sn-p。

const getLinkStyle = ({size})=> {

    return styled.a`
        background-color: ${size === 'medium' ? 'palevioletred' : 'black'};
        width: 100%;
    `;
}

const Link = getLinkStyle(this.props)

【讨论】：

【解决方案2】：

我也在寻找类似的东西，并想出了使用ThemeProvider 的想法。它是更多样板文件，但它允许您将样式从 props 传递给多个组件。但是你应该小心嵌套，因为它们会覆盖相同的命名属性。而且我认为如果你把太多的主题放在一起会变得非常混乱。

class App extends Component {
    render() {
        return (
            <Container bgColor={'red'}/>
        );
    }
}

export default App;


function Container(props) {
    const bgColor = props.bgColor;
    const bgTheme = {bgColor: bgColor};

    return <ThemeProvider theme={bgTheme}>
        <div>
            <Div1/>
            <Div2/>
        </div>
    </ThemeProvider>
}

const Div1 = styled.div`
  background-color: ${props => props.theme.bgColor};
  margin: 10px;
  height: 50px;
  width: 50px;
`;

const Div2 = styled.div`
  background-color: ${props => props.theme.bgColor};
  margin: 10px;
  height: 50px;
  width: 150px;
`;

【讨论】：