CSS

[cossack910]

CSSモジュール

sassインストール

node

docker exec -it reactad npm install node-sass

vite

docker exec -it reactad npm install -D sass

ソース

CssModules.module.scss

.container {
    border: solid 2px rgb(203, 25, 25);
    border-radius: 20px; //ハイフンが入る属性はキャメルケースにする
    padding: 8px;
    margin: 8px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

CssModules.tsx

//同階層の読み込み
import classes from "./CssModules.module.scss";

export const CssModules: React.FC = () => {
    return(
        <div className={classes.container}>
            <p>CSSモジュール</p>
            <button>OK</button>
        </div>
    );
};

export default CssModules;

[cossack910]

インライン

//CSS
const titleStyle = {
    margin: 0,
    color: "blue",
};

//呼び出し
return(
        <div>
            <p style={titleStyle}>インラインCSS</p>
            <button>OK</button>
        </div>
    );

[cossack910]

styled-jsx

viteだと警告出るみたい。解消面倒使うか微妙

package.json

docker exec -it reactad  npm install --save styled-jsx

types

docker exec -it reactad  npm install --save @types/styled-jsx

適応例

<div className="container">
    <p>スタイルJSX</p>
    <button>OK</button>
</div>
<style jsx="true">{`
    .container {
        border: solid 2px rgb(203, 25, 25);
        border-radius: 20px;
        padding: 8px;
        margin: 8px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
`}</style>

[cossack910]

styled-components

package.json

docker exec -it reactad  npm install styled-components

types

docker exec -it reactad  npm install @types/styled-components --save-dev

ソース

グレイブクォート内はsassと同じ書き方ができるので良い

import styled from "styled-components";

export const StyledComponents: React.FC = () => {
    return(
        <Container>
            <p>styled-components</p>
            <button>OK</button>
        </Container>
    )
}

const Container = styled.div`
    border: solid 2px rgb(203, 25, 25);
    border-radius: 20px;
    padding: 8px;
    margin: 8px;
    display: flex;
    justify-content: space-around;
    align-items: center;
`

[cossack910]

Emotion

https://github.com/cossack910/reactAd/blob/b37524a4438fce32855cab17c8cc1e7630d8813a/app/src/components/Emotion.tsx#L6

インストール

docker exec -it reactad npm install @emotion/react
docker exec -it reactad npm install @emotion/styled

docker exec -it reactad npm install -D @emotion/react
docker exec -it reactad npm install -D @emotion/styled

エラー出た

reactのライブラリなのでreactもインポートすると解決

import React from 'react'
/** @jsxRuntime classic */
import { jsx, css } from "@emotion/react";

css={style} で警告が出る

参考 https://zenn.dev/highgrenade/scraps/9464d86b2ff042

vite.config.ts

plugins: [
    react({
      jsxImportSource: "@emotion/react" ←これ追加
    })
  ],

tsconfig.json

"compilerOptions": {
     ...,
     "jsxImportSource": "@emotion/react", ←これ追加
}