スタイリッドコンポーネントで変数を設定する

Question

私は、CSS復号化ブロックで複数回使用される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; 
`;