具有 Glamorous css-in-js 的子选择器答案

【问题标题】：Child selectors with Glamorous css-in-js具有 Glamorous css-in-js 的子选择器
【发布时间】：2018-01-20 18:58:26
【问题描述】：

我正在尝试用于 css-in-js 的 Glamorous 库，但无法解决一件事。

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

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

有没有什么方法可以用魅力四射来实现它？例如，在这个 sn-p 中，我正在寻找一种方法来声明容器内的所有 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'));

这里是工作 sn-p 的链接： https://stackblitz.com/edit/glemorouschildselector

【问题讨论】：

我工作的团队不久前决定使用 JavaScript 进行样式设置。有史以来最糟糕的决定。拜托，拯救你未来的自己的痛苦。去萨斯。
@andrerpena，谢谢，这也是我对 css-in-js 的总体看法，但我决定建立一个小项目来亲身体验。这是我第一个想到的。
@andrerpena，请问您的主要痛点是什么？
1) 难以重用样式（CSS 类应该做什么）。 2) 难以查看 Chrome 开发工具并理解样式背后的原因。 3) 并非所有组件都将使用 JSS，因此，在大型项目中，您必须采取变通办法来实现样式一次并在实际的 CSS 和 JSS 中重用。 4）IDE工具不帮你写JSS。 5) 在调试样式时，您不能像使用 CSS 一样应用一次样式并随处查看结果。 6) 生成的 HTML 会很臃肿，因为你没有 CSS 类。
7) 除非您找到一个在 JavaScript 中执行此操作的库（例如 darken(...)），否则您无法利用 mixins 之类的 SASS 功能。 8) 开发人员习惯于编写 CSS，如果您想最大限度地减少代码不一致的可能性，就必须强制执行您的文化。这是我现在能想到的。一切为了什么？所以你可以说你的组件是完全可组合的，因为它们不依赖于 CSS？ Sass 是相当可组合的，并且广泛使用。为自己省去痛苦:)

标签： javascript css reactjs styled-components glamorous

【解决方案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

【讨论】：