2

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

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

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

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

2 回答 2

1

我也在寻找类似的东西，并想出了使用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;
`;
于 2018-01-10T17:02:36.630 回答
1

把想法大声说出来。创建一个接受一些设置并返回样式的函数。

没有测试这个片段。 

const getLinkStyle = ({size})=> {

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

const Link = getLinkStyle(this.props)
于 2017-11-25T15:06:50.380 回答