风格元件设置变量

我有一个在CSS减速块中多次使用的道具值。风格元件设置变量

是否可以将它初始化为一个变量来完成DRY：er代码？

以下是一个天真的例子，以显示我在找什么。这虽然不起作用 - 变量size后来无法访问：

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

来源

2017-11-25 Fellow Stranger

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

未测试此片段。

const getLinkStyle = ({size})=> { 

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

const Link = getLinkStyle(this.props)

来源

2017-11-25 15:06:50 ztadic91

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

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; 
`;

来源

2018-01-10 17:02:36 Simons0n

风格元件设置变量

回答

相关问题