Full Stack Development

CSS Styles

by Tomas Trescak t.trescak@westernsydney.edu.au

React Fundamentals

CSS Styles

  • CSS files
  • Inline Styles
  • CSS Modules
  • CSS in JS

Styling React

CSS Classes

      .header {
    font-weight: bold;
    color: salmon;
} 

.header:hover {
    color: blue;
}

.code {
    font-family: monospace;
    color: #333;
}

body {
  padding: 16px;
}

Styling React

CSS Classes

      function App() {
  return (
    <>
      <h1>
        Header
      </h1>
      <p>
        My Text
      </p>
    </>
  )
}
render(<App />)

Styling React

Inline Styles

      

function App() {
  return (
    <>
      <h1>
        Header
      </h1>
      <p>
        My Text
      </p>
    </>
  )
}
render(<App />)

Styling React

CSS Modules

      import "./styles.css";

function App() {
  return (
    <>
      <h1 className="header">
        Header
      </h1>
    </>
  )
}

<h1 className="App_header_JQ3e45">
  Hello
</h1>