This content originally appeared on DEV Community and was authored by Ogasawara Kakeru
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:<StyledButton isSelected={isSelected} onClick={clickHandler}>
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.
This content originally appeared on DEV Community and was authored by Ogasawara Kakeru
Ogasawara Kakeru | Sciencx (2024-10-09T12:58:07+00:00) React Basics~styling component/ css_ in _ js. Retrieved from https://www.scien.cx/2024/10/09/react-basicsstyling-component-css_-in-_-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.