How to style a React application with CSS
With React, you can add styles to components in many ways.
Use classes and CSS
The first and easiest way is to use classes and use normal CSS files to target these classes:
const Button = () => {
return <button className="button">A button</button>
}
.button {
background-color: yellow;
}
You can use the import statement to import the style sheet as follows:
import './style.css'
withWebpackWill be responsible for adding CSS properties to the bundle.
Use style attributes
The second method is to usestyle
The attributes attached to the JSX element. With this method, you don't need a separate CSS file.
const Button = () => {
return <button style={{ backgroundColor: 'yellow' }}>A button</button>
}
The definition of CSS is now slightly different. First, note the double curly braces: this is becausestyle
Accept an object. We pass in a JavaScript object, which is defined in curly braces. We can also do this:
const buttonStyle = { backgroundColor: 'yellow' }
const Button = () => {
return <button style={buttonStyle}>A button</button>
}
when using itcreate-react-app
, Because these styles are used, these styles are automatically prefixed by defaultAuto prefix.
In addition, the style is now camel case instead of using dashes. Whenever a CSS property has a dash, delete it, and then capitalize the next word.
The advantage of styles is that they are local to the component and will not leak to other components in other parts of the application, which cannot be provided using classes and external CSS files.
Use CSS modules
CSS moduleIt seems to be a perfect choice in the middle: you use classes, but CSS is limited to the scope of components, which means that any styles you add cannot be applied to other components without your permission. However, your style is defined in a separate CSS file, which is easier to maintain than CSS in JavaScript (and you can use old CSS property names).
First create a CSS file ending in.module.css
, E.gButton.module.css
. The best option is to give it the same name as the component to be styled
Add CSS here, and then import it into the component file to be styled:
import style from './Button.module.css'
Now you can use it in JSX:
const Button = () => {
return <button className={style.content}>A button</button>
}
That's it! In the generated markup, React will generate a specific unique class for each rendered component and assign CSS to that class so that CSS will not affect other markup.
Download mine for freeResponse Handbook
More response tutorials:
- A simple React application example: Get GitHub user information through API
- Build a simple counter with React
- VS Code setup for React development
- How to pass props to child components through React Router
- Create an application using Electron and React
- Tutorial: Create a spreadsheet with React
- Roadmap for learning React
- Learn how to use Redux
- Getting started with JSX
- Stylized components
- Introduction to Redux Saga
- Introduction to React Router
- Introduction to React
- Reaction component
- Virtual DOM
- Reaction event
- Reaction state
- Reaction props
- Reaction fragment
- React Context API
- Reaction PropTypes
- Reaction Concept: Declarative
- React: How to display other components when clicked
- How to loop inside React JSX
- Props and status in React
- Should you use jQuery or React?
- How much JavaScript do I need to know to use React?
- Gatsby Introduction
- How to reference DOM elements in React
- One-way data flow in React
- React high-end components
- React to life cycle events
- Reaction concept: immutability
- Reaction concept: purity
- Introduction to React hooks
- Introduction to create-react-app
- Reaction concept: composition
- React: demo component and container component
- Code splitting in React
- Server-side rendering with React
- How to install React
- CSS in React
- Use SASS in React
- Processing forms in React
- Reaction strict mode
- Reaction portal
- React rendering props
- Test React components
- How to pass parameters to event handlers in React
- How to deal with errors in React
- How to return multiple elements in JSX
- Conditional rendering in React
- Reaction, how to transfer props to subcomponents
- How to get the value of an input element in React
- How to use useState React hook
- How to use useCallback React hook
- How to use useEffect React hook
- How to use useMemo React hook
- How to use useRef React hook
- How to use useContext React hook
- How to use useReducer React hook
- How to connect your React app to the backend of the same source
- Reaching the router tutorial
- How to use React Developer Tools
- How to learn React
- How to debug a React application
- How to render HTML in React
- How to fix `dangerouslySetInnerHTML` does not match the error in React
- How can I solve the problem of React login form status and browser auto-fill
- How to configure HTTPS in React application on localhost
- How to fix the "Component cannot be updated while rendering other components" error in React
- Can I use React hooks within the conditions?
- Using useState with objects: how to update
- How to move in code blocks using React and Tailwind
- React, focus on an item in React when added to the DOM
- Response, edit text on doubleclick