🙆

【React】CSSのあて方

に公開
React
tech

Inline Style

  • 値は文字列として括弧で囲む。ハイフン繋ぎはキャメルケースに変更
export const InlineStyle = () => {
  const containerStyle = {
    border: '2px solid #476bad',
    borderRadius: '24px',
    padding: '16px',
  };
  const titleStyle = {
    fontSize: '20px',
  };
  const buttonStyle = {
    padding: '8px 12px',
    cursor: 'pointer',
  };
  return (
    <div style={containerStyle}>
      <p style={titleStyle}>Inline Style</p>
      <button style={buttonStyle}>ボタン</button>
    </div>
  );
};

CSS Modules

import classes from "./CssModules.module.scss" // classesでcssファイルをimport

export const CssModules = () => {
  return (
    <div className={classes.container}>
      <p className={classes.title}>CSS Modules</p>
      <button className={classes.button}>ボタン</button>
    </div>
  );
};

Styled JSX

  • 一時的な確認などで活用できそう。デフォルトではsassが使えない
export const Styledjsx = () => {
  return (
    <>
      <div className="container">
        <p className="titleStyle">Styled JSX</p>
        <button className="buttonStyle">ボタン</button>
      </div>
      <style jsx="true">{`
          .container = {
            border: 2px solid #476bad;
            border-radius: 24px;
            padding: 16px;
          };
          .title = {
            font-size: 20px;
          };
          .button = {
            padding: 8px 12px;
            cursor: pointer;
          `};
      }</style>
    </>
  );
};

styled componetns

css in jsの人気ライブラリの一つ

import styled from "styled-components";

export const StyledComponents = () => {
  return (
    <S-Container> // 変数名で囲う。styleを当てるためのコンポーネントだとわかるように記法を工夫した方が良さそう。Sを付けるなど。
      <S-title>Styled JSX</S-title>
      <S-button>ボタン</S-button>
    </S-Container>
  );
};

const S-Container = styled.div` // タグ名を指定
  border: 2px solid #476bad;
  border-radius: 24px;
  padding: 16px;
`;
const S-title = styled.p`
  font-size: 20px;
`;
const S-button = styled.button` // タグ名を指定
  padding: 8px 12px;
  cursor: pointer;
  &:hover {
    background: #fafafa;
  }
`;

Discussion