React Basics~styling component/ inline_style

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