Question

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

最初是否可以将其设置为变量以完成DRY：er code？

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

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

Answer 1

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

没有测试此代码段。

const getLinkStyle = ({size})=> {

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

const Link = getLinkStyle(this.props)

Answer 2

我也在寻找类似的东西，想出了使用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;
`;

在样式组件中设置变量

2 个答案: