This content originally appeared on DEV Community and was authored by Ogasawara Kakeru
- The inline style must be written in Javascript.
・The name of the property must be 'style'
・It makes no difference whether you set the style by dividing a value or by setting it directly.
・The property must be written in camel case,
like this fontWeight: "bold",.
・If we want to write property in CSS style(kebabcase),
We need to write it inside 'double quote' or 'single quote'.
This is an example "border-radius: 9999,.
・src/Example.js
import { useState } from "react";
const Example = () => {
const [isSelected, setIsSelected] = useState(false);
const clickHandler = () => setIsSelected((prev) => !prev);
const style = {
width: 120,
height: 60,
display: "block",
fontWeight: "bold",
"border-radius": 9999,
cursor: "pointer",
border: "none",
margin: "auto",
background: isSelected ? "pink" : "",
};
return (
<>
<button style={style} onClick={clickHandler}>
Button
</button>
<div style={{ textAlign: "center" }}>{isSelected && "Clicked!"}</div>
</>
);
};
export default Example;
・Befor pushing the button.
・After pushing the button.
This content originally appeared on DEV Community and was authored by Ogasawara Kakeru
Ogasawara Kakeru | Sciencx (2024-10-08T18:52:01+00:00) React Basics~styling component/ inline_style. Retrieved from https://www.scien.cx/2024/10/08/react-basicsstyling-component-inline_style/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.