風格元件設置變量

我有一個在CSS減速塊中多次使用的道具值。風格元件設置變量

是否可以將它初始化爲一個變量來完成DRY：er代碼？

以下是一個天真的例子，以顯示我在找什麼。這雖然不起作用 - 變量size後來無法訪問：

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

來源

2017-11-25 Fellow Stranger

大聲思考。創建一個接受一些設置並返回樣式的函數。

未測試此片段。

const getLinkStyle = ({size})=> { 

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

const Link = getLinkStyle(this.props)

來源

2017-11-25 15:06:50 ztadic91

我也尋找類似的東西，並想出了主意，用一個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; 
`;

來源

2018-01-10 17:02:36 Simons0n

風格元件設置變量

回答

相關問題