One of the biggest struggle I go through when working with React is styling. Trends have changed, over and over, but I never had the feeling that libraries out there were really solving the styling problem.

Let’s give a look at the very popular css-in-js library, styled-components.

const Button = styled.a`

border-radius: 3px; ${props => props.primary && css`

background: ${theme.primary};

`} ${props => props.size === 'small' && css`

font-size: 12px;

`}

`;

Alright, let’s clean this a little:

Button {

border-radius: 3px;



::primary {

background: $primary;

} ::size {

::small {

font-size: 12px;

}

}

}

If you like the syntax, good news: you can start using it now, it’s open-sourced and called pretty components.

Tell us moooore

Why?

Do we need any additional logic for mapping our component to its hover style only when it’ll be hovered?

a {

&:hover {

text-decoration: underline;

}

}

Of course we don't, because we already acknowledge that writing :hover will make it conditionally styled, based on our element's state.

The idea here is similar: making props part of that state, right inside our style declaration. In other words, pretty components make that link implicit for you between your component and its style definition.

Features

Use any component props as style selectors, using the double-colon sign

Use Sass nested styles syntax and its sugared & sign

Create variables, later available in every style definition

Stop overthinking class names.

Pretty components automatically generates readable ones:

.Button , .Button__primary , .Button__size--small

How?

Now you may wonder, how can you write this in JavaScript. Well, you can’t.

In order to use Prop-based StyleSheets (.pss files), you can quickly set up the Pretty Webpack loader that will do the job for you. It’s really a matter of a few lines to paste into your webpack config file.