React-styling

Inline Styling

Example of Inline styling

const styles = {
   color : 'white',
   background: 'blue',
   padding: '0.5rem 1rem',
   borderRadius: '2px' 
}

<button style={styles}>Click me </button>

Advantages

• Encapsulation
• Code sharing
• Isolated
• Explicit dependencies
• No library

Disadvantages

• Cascade, overrides
• Media queries (Windows sizing)
• Pseudo selectors (Hoover states etc)
• Keyframe animations

CSS in JS

Using a library in JS to do this for you. e.g. and the one I know styled-components. Others include emotion, aphrodite, styled-jsx

Example of styled-components

import styled from 'styled-components'

const Button = styled.button `
   color : white;,
   background: blue;
   padding: '0.5rem 1rem;
   borderRadius: 2px;
`

function MyComponent() {
   return (
     <Button>Already styled</Button>
   )
}

Set styles dynamically e.g.

import styled from 'styled-components'

const Button = styled.button `
   color : white;,
   background: ? ${props => props.secondary ? 'gray' : 'blue' };
`

function MyComponent() {
   return (
     <Button>Already styled</Button>
   )
}

Advantages

• Media Queries
• Pseudo selectors
• Keyframe animations
• Co-located styles and code

Disadvantages

• Choosing a library
• Cascade, overrides

CSS Stylesheets

Advantages

• No new syntax
• All of CSS
• Community experience

Disadvantages

• Global namespace
• Dependencies
• Dead code elimination
• Minification
• Sharing constants
• Non-deterministic resolution
• Isolation

CSS Modules

component-styles.module.css

.button {
   color : white;,
   background: blue;
   padding: 0.5rem 1rem;
   border-radius: 2px;
}

Can we used with react with module bundler .

import * as css from './component-styles.module.css'

function MyComponent() {
   return <button className={css.button}>Click me</button>
}

Advantages

• Power of CSS
• Isolated
• Explicit dependencies

Disadvantages

• Sharing constants