儿童选择器与魅力四射的css-in-js

Question

我已经尝试了用于css-in-js的迷人图书馆,并且无法绕过一件事.

使用vanilla css,您可以轻松地将类型添加到类中的所有选择器,例如:

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

有没有办法用迷人的方式来实现它？例如,在这个代码片段中,我正在寻找一种方法来声明容器内的所有div应该具有margin-right20px,而无需将其传递给每个组件:

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/glamour/blob/master/docs/selectors.md

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