Glamorous css-in-jsの子セレクタ

Question

私はcss-in-jsのGlamorousライブラリを試しています。あなたは簡単に、クラス内のすべてのセレクタにスタイルを追加することができバニラCSSで

は言う：

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

華やかでそれをachiveする方法はありますか？例えば、このスニペットでは、コンテナ内のすべての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