风格元件设置变量
问题描述:
我有一个在CSS减速块中多次使用的道具值。风格元件设置变量
是否可以将它初始化为一个变量来完成DRY:er代码?
以下是一个天真的例子,以显示我在找什么。这虽然不起作用 - 变量size
后来无法访问:
const Link = styled.a`
${props => {const size = props.size}};
background-color: ${size === 'medium' ? 'palevioletred' : 'black'};
width: 100%;
`;
答
大声思考。创建一个接受一些设置并返回样式的函数。
未测试此片段。
const getLinkStyle = ({size})=> {
return styled.a`
background-color: ${size === 'medium' ? 'palevioletred' : 'black'};
width: 100%;
`;
}
const Link = getLinkStyle(this.props)
答
我也寻找类似的东西,并想出了主意,用一个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;
`;