I've trying out the Glamorous library for css-in-js and can not wrap my head around one thing.

With vanilla css you can easily add styles to all selectors within a class, say:

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

Is there any way to achive it with glamorous? For example in this snippet Im looking for a way to state that all the divs inside the container should have a margin-right of 20px without the need to pass it to each ponent:

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

here's a link to the working snippet:

I've trying out the Glamorous library for css-in-js and can not wrap my head around one thing.

With vanilla css you can easily add styles to all selectors within a class, say:

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

Is there any way to achive it with glamorous? For example in this snippet Im looking for a way to state that all the divs inside the container should have a margin-right of 20px without the need to pass it to each ponent:

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

here's a link to the working snippet: https://stackblitz./edit/glemorouschildselector

• javascript
• css
• reactjs
• styled-ponents
• glamorous

• 1 The team I work at decided to style in JavaScript a while ago. Worst decision ever. Please, save your future self the pain. Go Sass. – Andre Pena Commented Aug 12, 2017 at 10:45
• 1 @andrerpena, thanks, that's my overall opinion on css-in-js as well, but i decided to build a small project to experience it first hand. That's the first thing I hit my head on. – Gleb Kostyunin Commented Aug 12, 2017 at 13:22
• @andrerpena, what are your main pain points, if I may ask? – Gleb Kostyunin Commented Aug 12, 2017 at 19:47
• 1 1) Difficulty reusing styles (what CSS classes are supposed to do). 2) Difficulty to look at Chrome Dev Tools and understand the reasoning behind styles. 3) Not all of the ponents will use JSS, so, in a large scale project, you'll have to do workarounds to implement styles once and reuse across actual CSS and JSS. 4) IDE tools do not help you write JSS. 5) While debugging styles, you can't apply the style once and see the results everywhere like you do with CSS. 6) The resulting HTML will be bloated because you don't have CSS classes. – Andre Pena Commented Aug 12, 2017 at 20:37
• 1 7) You can't take advantage of SASS features like mixins unless you find a library that does that in JavaScript (e.g darken(...)). 8) Developers are used to writing CSS and you'll have to enforce your culture if you want to minimize the chance of code inconsistency. This is what I can think about right now. And everything for what? So you can say your ponents are fully posable because they don't have dependencies on CSS? Sass is pretty posable, and widespread. Save yourself the pain :) – Andre Pena Commented Aug 12, 2017 at 20:37

1 Answer 1

glamorous ponent factory style arguments are powered by glamor which has support for contextual selectors.

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

const Container = glamorous.div(
    {
        display: 'flex',
        '& div': {
            marginRight: '20px',
        },
    },
)

glamor selector documentation: https://github./threepointone/glamor/blob/master/docs/selectors.md

Working demo: https://stackblitz./edit/glemorouschildselector-fzj77j