兒童選擇與迷人的css-in-js

Question

我已經嘗試了css-in-js迷人的圖書館，無法將我的頭圍繞在一件事情上。

香草CSS，你可以樣式類中方便地添加到所有的選擇，說：

.my-awesome-class div { 
    margin-right: 10px; 
} 

有什麼辦法與美豔才達到的呢？例如，在這個片段進出口尋找一種方式來聲明，所有的容器內的div應該有20像素的margin-right，而不需要將它傳遞給每個組件：

import React from 'react'; 
import { render } from 'react-dom'; 
import glamorous, {Div} from 'glamorous'; 

const Container = glamorous.div({ 
    display: 'flex' 
}); 

class App extends React.Component { 
    render() { 
    return (
     <Container> 
     <Div backgroundColor="tomato" padding="10px">One</Div> 
     <Div backgroundColor="wheat" padding="10px">Two</Div> 
     <Div backgroundColor="salmon" padding="10px">Three</Div> 
     </Container> 
    ); 
    } 
} 

render(<App />, document.getElementById('root')); 

這裏的工作片段的鏈接： https://stackblitz.com/edit/glemorouschildselector

Answer 1

迷人的組件工廠風格的論據是支持上下文選擇器的魅力。

上下文選擇：&將通過 '指示器' 被替換成 目標規則

const Container = glamorous.div(
    { 
     display: 'flex', 
     '& div': { 
      marginRight: '20px', 
     }, 
    }, 
) 

魅力選擇文檔：https://github.com/threepointone/glamor/blob/master/docs/selectors.md

工作演示：https://stackblitz.com/edit/glemorouschildselector-fzj77j