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>
   )
}