React CSS Styling

How it works

React does not require a special styling library. Importing a CSS file through Vite makes its styles part of the app build. Ordinary selectors are global within that page, so choose names that state the component’s responsibility. This example styles a collection notice using one explicit class. The lesson’s CSS stays separate from the Bhylu website theme and does not introduce a global framework into tutorial pages.

Run the code

Use a separate empty lab folder with Node 22.12+ in the 22 series. Save the files below using their displayed paths; browsers may download only the basename, so create src, public or tests folders as listed. The pinned project uses React and React DOM 19.3.1 with Vite 7.3.1. Run npm install, then npm run dev and open the local address Vite prints. React examples do not run in Bhylu’s current playground.

No Apache, MySQL or change to Bhylu’s server configuration is needed. These are local teaching projects, not a publishing package. Keep generated dependencies and lockfiles in your own lab. Review the project setup.

• package.json
• index.html
• src/main.jsx
• src/style.css
• vite.config.mjs
• src/notice.css

Example

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';
import './notice.css';

function App() {
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <section className="collection-notice">
        <h2>Before you leave</h2>
        <p>Check the return day with the desk volunteer.</p>
      </section>
    </main>
  );
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Expected result

The collection notice has a blue border and comfortable padding in its separate lab.

The supporting CSS file is imported alongside the shared readable lab stylesheet. Class naming makes the intended scope visible, but it does not technically isolate the selector. Avoid broad rules such as button { ... } in a shared feature package unless a global reset is actually part of its contract. Keep responsive rules and focus styles in the stylesheet where they can be reviewed together.

Supporting files for this lab

.collection-notice {
  border: 2px solid #0078d4;
  padding: 1rem;
  border-radius: 0.5rem;
}