Glamorous css-in-js 的子选择器

Question

我正在尝试 css-in-js 的 Glamorous 库，但我无法全神贯注于一件事。

使用原版 css，您可以轻松地为 class 内的所有选择器添加样式，比如：

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

有什么办法可以用glamorous来实现吗？例如，在此代码段中，我正在寻找一种方法来声明容器内的所有 div 都应具有 20px 的 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'));

这是工作代码段的 link： https://stackblitz.com/edit/glemorouschildselector

Answer 1

glamorous component factory style arguments 由支持上下文选择器的 glamor 提供支持。

contextual selectors: & will be replaced by the 'pointer' to the target rule

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

Glamorous css-in-js 的子选择器

Child selectors with Glamorous css-in-js

javascript

css

reactjs

styled-components

glamorous