・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.
The above is the detailed content of React Basics~styling component/ inline_style. For more information, please follow other related articles on the PHP Chinese website!