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

CSS Stuff

Selectors

Simple Selector

The body is known as the simple selector and the background-color:#cccc99; is the property name and value

body {
    background-color:#cccc99;
}

id Selector

#myid {
    background-color:#cccc99;
}

class Selector

.myClass {
    font-style:italic;
}

You can group selector with a comma.

h1,h2 {
    background-color:#cccc99;
}

descendant selector =

This will only effect the

elements below a div tag.

div p {
   background-color:#ddddaa;
}

child selector =

This will only effect the child and not descendant

elements below a div tag.

div > p {
   background-color:#ddddaa;
}

<div>
  <form>
    <p>I'm a descendant but not a child</p>
  </form>
  <p>I'm a child</p>
</div>

attribute selector =

This will only effect if the attribute matches.

img[alt=spacer] {
   padding:0px;
}

<img src="gradient.jpg" alt="spacer">

psuedo selector =

This will only effect if the pseudo is true. <syntaxhighlight lang="css"> a:visited {color: #dddddd; }