Reactでの各種ライブラリを使ったCSSの書き方とCSSの書き方で学んだことをまとめてみた

学んだこと

Emotion

• Styled JSX や StyledComponent ライブラリを使った CSS の書き方をそのままの形で記述することができる。
• そのため、プロジェクト事に CSS の書き方を統一化する必要がある。

StackBlitz で導入する場合

• Emotion を使用するには、@emotion/reactと@emotion/styledをインストールする必要がある。
• 以下のコマンドを実行することで、インストールすることができる
  • npm install @emotion/react
  • npm install @emotion/styled

実際に書いてみた

• Emotion.jsx
  • 上 2 行は React 内で CSS-in-JS 構文を正しく動かすためのおまじないみたいなもの。
  • /** @jsxRuntime classic */
    • JSX をどう変換するか指定している。
    • この場合は古い JSX の処理方式を使っている。
  • /** @jsx jsx*/
    • JSX を使用時、どの関数で変換するかを指定している。
    • css={...}を動かすため、Emotion の jsx 関数を動かさないといけない。

/** @jsxRuntime classic */
/** @jsx jsx*/
import { jsx, css } from '@emotion/react';
import styled from '@emotion/styled';
export const Emotion = () => {
  const containerStyle = css`
    border: solid 2px #392eff;
    border-radius: 20px;
    padding: 8px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  `;
  const titleStyle = css`
    margin: 0;
    color: #3d84a8;
  `;
  return (
    <div css={containerStyle}>
      <p css={titleStyle}>- Emotion -</p>
      <SButton>FIGHT!!!</SButton>
    </div>
  );
};

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

• main.jsx
  • Emotion.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';
import { Emotion } from './components/Emotion';

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

様々な CSS のあて方についてまとめ

• 様々な CSS のあて方について以下のライブラリについて学ぶ事ができた。

  • Inline Style
  • CSS Moadules
  • Styled JSX
  • styled components
  • Emotion

• 様々な CSS のあて方は知って損はないと思うので、プロジェクトに参画後に再度調べて理解するほうが良さそう。