React Basics~styling component/ 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”;
imp…


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;

  1. We need to set the styled components as styeled.element.
    This is an example.
    const StyledButton = styled.button
    //styles
    ;.

  2. We can pass a prop to the styled components like this.
    from: <StyledButton isSelected={isSelected} onClick={clickHandler}>
    to: background: ${({ isSelected }) => (isSelected ? "pink" : "")};

  3. We can set a media query in the styled components like this
    @media (max-width: 600px) {
    border-radius: 0;
    }

  4. We can implement the other style in the styled components like this.
    const OrangeButton = styled(StyledButton)

  5. 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.
Image description

・The normal button(Pink button) after cliekd.
Image description

・The orange button before cliekd.
Image description

・The orange button after cliekd.
Image description


This content originally appeared on DEV Community and was authored by Ogasawara Kakeru


Print Share Comment Cite Upload Translate Updates
APA

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/

MLA
" » React Basics~styling component/ css_ in _ js." Ogasawara Kakeru | Sciencx - Wednesday October 9, 2024, https://www.scien.cx/2024/10/09/react-basicsstyling-component-css_-in-_-js/
HARVARD
Ogasawara Kakeru | Sciencx Wednesday October 9, 2024 » React Basics~styling component/ css_ in _ js., viewed ,<https://www.scien.cx/2024/10/09/react-basicsstyling-component-css_-in-_-js/>
VANCOUVER
Ogasawara Kakeru | Sciencx - » React Basics~styling component/ css_ in _ js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/09/react-basicsstyling-component-css_-in-_-js/
CHICAGO
" » React Basics~styling component/ css_ in _ js." Ogasawara Kakeru | Sciencx - Accessed . https://www.scien.cx/2024/10/09/react-basicsstyling-component-css_-in-_-js/
IEEE
" » React Basics~styling component/ css_ in _ js." Ogasawara Kakeru | Sciencx [Online]. Available: https://www.scien.cx/2024/10/09/react-basicsstyling-component-css_-in-_-js/. [Accessed: ]
rf:citation
» React Basics~styling component/ css_ in _ js | Ogasawara Kakeru | Sciencx | 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.

You must be logged in to translate posts. Please log in or register.