Javascript js中带有迷人css的儿童选择器

我正在尝试js中css的迷人库，但我对一件事一无所知

使用vanilla css，您可以轻松地向类中的所有选择器添加样式，例如：

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

有没有办法用魅力来实现它？例如，在这段代码中，我正在寻找一种方法来说明容器中的所有div都应该具有20px的

边距权

，而无需将其传递给每个组件：

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'));

从“React”导入React；
从'react dom'导入{render}；
从“glamorous”中导入glamorous，{Div}；
const Container=glamorous.div({
显示：“flex”
});
类应用程序扩展了React.Component{
render（）{
返回(
一个
两个
三
);
}
}
render（
glamorous component factory样式参数由glamor提供支持，glamorous支持上下文选择器

上下文选择器：&将替换为指向
目标规则

魅力选择器文档：

工作演示：
我所在的团队不久前决定使用JavaScript进行风格设计。这是有史以来最糟糕的决定。请不要让你未来的自己感到痛苦。去吧，Sass。@andrerpena，谢谢，这也是我对js中css的总体看法，但我决定构建一个小项目来亲身体验。这是我第一个想到的。@andrerpena，真是一个好主意如果我可以问的话，你的主要痛点是什么？1）重用样式的困难（CSS类应该做什么）。2） 查看Chrome开发工具和理解样式背后的原因很困难。3） 并非所有组件都将使用JS，因此，在大型项目中，您必须采取变通办法，一次性实现样式，并在实际的CSS和JS之间重用。4） IDE工具不能帮助您编写JS。5） 在调试样式时，您不能像使用CSS那样一次性应用样式并在任何地方看到结果。6） 由于您没有CSS类，因此生成的HTML将变得臃肿。7）除非您在JavaScript中找到这样的库（例如darken（…），否则无法利用诸如mixin之类的SASS功能。8） 开发人员习惯于编写CSS，如果您想最大限度地减少代码不一致的可能性，就必须强制实施您的文化。这就是我现在能想到的。一切都是为了什么？所以你可以说你的组件是完全可组合的，因为它们不依赖于CSS？Sass是相当可组合的，并且广泛存在。省省你自己的痛苦：）
const Container = glamorous.div(
    {
        display: 'flex',
        '& div': {
            marginRight: '20px',
        },
    },
)