Javascript 设置样式化组件中的变量

我有一个prop值，在CSS declaration块中被多次使用

最初是否可以将其设置为一个变量以完成干：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;
`;

类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；
功能容器（道具）{
const bgColor=props.bgColor；
常量bgTheme={bgColor:bgColor}；
返回
}
const Div1=styled.div`
背景色：${props=>props.theme.bgColor}；
利润率：10px；
高度：50px；
宽度：50px；
`;
const Div2=styled.div`
背景色：${props=>props.theme.bgColor}；
利润率：10px；
高度：50px；
宽度：150px；
`;