Reactでの各種ライブラリを使ったCSSの書き方について学ぶ

学んだこと

Styled JSX

• CSS の実装をサポートするライブラリ
  • next.js ではデフォルトで導入されている。

StackBlitz で導入する場合

• 別途 npm を使用し、インストールを行う必要がある。
• コマンドライン上にてnpm install --save styled-jsxを実行し、インストールを行う。

実際に使ってみた

• Styled.Jsx.jsx
  • StyledJSX の特徴として、style タグ内で CSS を書くこと。
  • 注意点として、デフォルトだと button のホバー等の疑似要素は使用することができない。
  • 別途プラグイン等を入れる必要がある。

export const StyledJsx = () => {
  return (
    <>
      <div className="container">
        <p className="title">- Styled JSX</p>
        <button className="button">FIGHT!!!</button>
      </div>
      <style jsx="true">{`
      .container {
        border: solid 2px #392eff;
        border-radius: 20px;
        padding: 8px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .title {
        margin: 0;
        color: #3d84a8;
      }

      .button {
        background-color: #abedd8;
        border: none;
        padding: 8px;
        border-radius: 8px;
      }
    `}</style>
    </>
  );
};

• main.jsx
  • 作成したコンポーネントを呼び出すようにした。
  • 特に変わったことはしていない。

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';
import { InlineStyle } from './components/InlineStyle';
import { CssModules } from './components/CssModules';
import { StyledJsx } from './components/Styled.Jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <div className="App">
      <InlineStyle />
      <CssModules />
      <StyledJsx />
    </div>
  </StrictMode>
);

styled component

• スタイルをコンポーネントとして持つことができる。

StackBlitz で導入する場合

• 別途 npm を使用し、インストールする必要がある。
  • 以下のコマンドを実行し、インストールする。
  • npm install --save styled-components

実際に使ってみた

• StyledComponents.jsx
  • styledcomponent を使用するには、styled-components をインポートする必要がある。
  • styled.タグ名CSSの定義と記述し CSS を定義する。
  • 定義後、変数に格納。
  • 格納した変数をタグとして使えるため、タグで HTML を囲むと囲んだ HTML 文に CSS を当てる事ができる。

import styled from 'styled-components';

export const StyledComponents = () => {
  return (
    <SContainer>
      <STitle>- Styled JSX</STitle>
      <SButton>FIGHT!!!</SButton>
    </SContainer>
  );
};

const SContainer = styled.div`
  border: solid 2px #392eff;
  border-radius: 20px;
  padding: 8px;
  display: flex;
  justify-content: space-around;
  align-items: center;
`;
const STitle = styled.p`
  margin: 0;
  color: #3d84a8;
`;

const SButton = styled.button`
  background-color: #abedd8;
  border: none;
  padding: 8px;
  border-radius: 8px;
`;

• main.jsx
  • 上記で作成したコンポーネントを呼び出す。

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';
import { InlineStyle } from './components/InlineStyle';
import { CssModules } from './components/CssModules';
import { StyledJsx } from './components/Styled.Jsx';
import { StyledComponents } from './components/StyledComponents';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <div className="App">
      <InlineStyle />
      <CssModules />
      <StyledJsx />
      <StyledComponents />
    </div>
  </StrictMode>
);