Heim >Web-Frontend >js-Tutorial >React Basics~Styling-Komponente/css_ in _js
If we want to write the style as a css style in a javascript file, we can use the styled-components.
We need to install the styled components with a command like this npm i styled-components.
・src/Example.js
iimport { useState } from "react"; import styled from "styled-components"; const StyledButton = styled.button` margin: auto; border-radius: 9999px; border: none; display: block; width: 120px; height: 60px; font-weight: bold; cursor: pointer; background: ${({ isSelected }) => (isSelected ? "pink" : "")}; @media (max-width: 600px) { border-radius: 0; } `; const OrangeButton = styled(StyledButton)` background: orange; :hover { color: red; opacity: 0.7; } span { font-size: 2em; } `; const Example = () => { const [isSelected, setIsSelected] = useState(false); const clickHandler = () => setIsSelected((prev) => !prev); return ( <> <StyledButton isSelected={isSelected} onClick={clickHandler}> StyledButton </StyledButton> <OrangeButton isSelected={isSelected} onClick={clickHandler}> <span>OrangeButton</span> </OrangeButton> <div style={{ textAlign: "center" }}>{isSelected && "Clicked!"}</div> </> ); }; export default Example;
We need to set the styled components as styeled.element.
This is an example.
const StyledButton = styled.button
//styles
;.
We can pass a prop to the styled components like this.
from:
to: background: ${({ isSelected }) => (isSelected ? "pink" : "")};
We can set a media query in the styled components like this
@media (max-width: 600px) {
border-radius: 0;
}
We can implement the other style in the styled components like this.
const OrangeButton = styled(StyledButton)
We can set a pseudo-element in the styled components like this.
:hover {
color: red;
opacity: 0.7;
}
・The normal button(Gray button) before cliekd.
・The normal button(Pink button) after cliekd.
・The orange button before cliekd.
・The orange button after cliekd.
Das obige ist der detaillierte Inhalt vonReact Basics~Styling-Komponente/css_ in _js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!