Skip to main content

Component Import

Another way of using styles is to import the css directly into a component. Now we need to store this CSS next to our code in the src-directory.

File: src/resources/styles/App.css

.app-component {
    padding: 2rem;
    border: 1px solid #000;
}

File: src/App.tsx

import './resources/styles/App.css'

const App = () => {
  const name = "Function Component"

  return (
    <div className="app-component">
      <h1>{ name }</h1>
    </div>
  )

}

export default App;

Function Component

caution
  1. As you can see, applying a css class to an element, has a slight syntax deviation. Instead of using class on the element, you need to specify className since class is (obviously) a reserved word in JavaScript.
  2. Once imported, (because SPA) the stylesheet is loaded into the DOM and cascades into all subsequent components!