View source for React-styling

== Inline Styling ==
Example of Inline styling

<syntaxhighlight lang="javascript">
const styles = {
   color : 'white',
   background: 'blue',
   padding: '0.5rem 1rem',
   borderRadius: '2px' 
}

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

=== 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
<syntaxhighlight lang="javascript">
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>
   )
}
</syntaxhighlight>

Set styles dynamically e.g.
<syntaxhighlight lang="javascript">
import styled from 'styled-components'

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

function MyComponent() {
   return (
     <Button>Already styled</Button>
   )
}
</syntaxhighlight>
=== 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
<syntaxhighlight lang="css">
.button {
   color : white;,
   background: blue;
   padding: 0.5rem 1rem;
   border-radius: 2px;
}
</syntaxhighlight>

Can we used with react with module bundler .
<syntaxhighlight lang="javascript">
import * as css from './component-styles.module.css'

function MyComponent() {
   return <button className={css.button}>Click me</button>
}
</syntaxhighlight>
=== Advantages ===
* Power of CSS
* Isolated
* Explicit dependencies

=== Disadvantages ===
* Sharing constants


= CSS Stuff =
You can find information on css on this page [[css]]