Styling components is one of the new ways to use CSS in modern JavaScript. Its purpose is to become the successor of CSS modules, a way to write CSS whose scope is limited to a single component and will not leak to any other elements in the page
- A brief history
- Introduce stylized components
- installation
- Your first styled component
- Use props to customize components
- Extend existing styled components
- This is normal CSS
- Use vendor prefix
- in conclusion
A brief history
Once upon a time, the Web was so simple that even CSS did not exist. We usetableAnd frame. wonderful time.
thenCSSBecome alive, after a period of time, people gradually realized that the framework can greatly help you, especially in the construction of grid and layout, Bootstrap and Foundation play an important role in it.
Preprocessor like thisSassOther help greatly slowed down the adoption of the framework and better organized the code, such asBoundary elementwithSMACSSUsed more and more, especially within the team.
Agreement is not a solution to all problems, and it is very complicated to remember, so in recent years, as more and more people adoptJavaScriptAnd to build the process in each front-end project, CSS found a way to enter JavaScript (CSS-in-JS).
New tools explore new ways to use CSS-in-JS, some of which are successful and increasingly popular:
- Reaction style
- jsxstyle
- radium
And more.
Introduce stylized components
One of the most popular of these tools isStylized components.
It is the successor to beCSS module, This is a way to write CSS, its scope is limited to a single component, and will not leak to any other elements in the page.
(More information about CSS modulesHerewithHere)
Styling components allows you to write pure CSS in the component without worrying about class name conflicts.
installation
Use installation style componentsnpmoryarn:
npm install styled-components
yarn add styled-components
That's it! Now, all you have to do is to add this import:
import styled from 'styled-components'
Your first styled component
along withstyled
After the objects are imported, you can now start creating styled components. This is the first one:
const Button = styled.button`
font-size: 1.5em;
background-color: black;
color: white;
`
Button
It isreactionPlay its biggest role.
We use the functionality of the style object (calledbutton
In this case, some CSS properties are passed in itTemplate text.
This component can now be rendered in our container using regular React syntax:
render(<Button />)
Stylized components not only provide other functions, but can also be used to create other componentsbutton
, Likesection
,h1
,input
And many others.
The syntax with backticks may be strange at first, but it is calledMarkup template, It is pure JavaScript, a way to pass parameters to a function.
Use props to customize components
When you pass some props to the style component, it will pass them toDOMThe node is installed.
For example, this is what we passedplaceholder
withtype
Propsinput
ingredient:
const Input = styled.input`
//...
`
render(
<div>
<Input placeholder="…" type=“text” />
</div>
)
This will do what you want to insert these props as HTML attributes.
Props instead of being blindly passed toDOMIt can also be used to customize components based on prop values. This is an example:
const Button = styled.button`
background: ${props => (props.primary ? 'black' : 'white')};
color: ${props => (props.primary ? 'white' : 'black')};
`
render(
<div>
<Button>A normal button</Button>
<Button>A normal button</Button>
<Button primary>The primary button</Button>
</div>
)
Set upprimary
Prop changes the color of the button.
Extend existing styled components
If you have a component and want to create a similar component with a slightly different style, you can useextend
:
const Button = styled.button`
color: black;
//...
`
const WhiteButton = Button.extend </span><span style="color:#e6db74"> color: white; </span><span style="color:#e6db74">
render(
<div>
<Button>A black button, like all buttons</Button>
<WhiteButton>A white button</WhiteButton>
</div>
)
This is normal CSS
In styling components, you can use CSS that you already know and love. This is pure CSS. It is neither pseudo CSS nor inline CSS, and it has its limitations.
You can use media queries,NestingAnd anything else you might need.
This is an example of a media query:
const Button = styled.button`
color: green;
@media screen and (max-width: 800px) {
color: black;
}
`
Use vendor prefix
The styling component automatically adds all required vendor prefixes, so you don’t need to worry about this issue.
in conclusion
This is the introduction of "styled components"! These concepts will help you understand the concept and help you get started and run in this way of using CSS in JavaScript.
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