Детские селекторы с гламурным css-in-js

Question

Я пробовал Гламурную библиотеку для css-in-js и не могу обернуться вокруг одной вещи.

С помощью vanilla css вы можете легко добавлять стили ко всем селекторам в классе, например:

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

Есть ли способ добиться этого с помощью гламура? Например, в этом фрагменте я ищу способ заявить, что все элементы div внутри контейнера должны иметь margin-right 20 пикселей без необходимости передавать его каждому компоненту:

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