[React] React Component Styling

9944 ワード
React テキストリンク

Style Loaders


Webpackでは、.js、.jsxファイルがbabel-loaderで処理され、.cssファイルがstyle-loader、css-loaderで処理される.
CRA(create-react-app)のwebpack設定を確認
npm run eject
CRAが使用する4つのスタイルのロードプログラム
  • css 
    • import './App.css'
  • cssModule 
    • import styles from './App.module.css'
  • sass 
    • import './App.scss'
import './App.sass'
  • sassModule 
    • import styles from './App.module.scss'
import styles from './App.module.sass'

    CSS, SASS

    <head>で<style>を使用してグローバルに追加
    問題:反応は素子別ではないため、クラス名を管理してグローバル汚染を避ける必要がある=>CSS方法

    CSS module, SASS module

    [filename]_[classname]__[hash]形式に変更され、<style>ラベルに挿入されました=>クラス名グローバル汚染問題の解決

    使用
    import styles from './App.module.css'

<div className={styles['App']}></div>
    classnames
    クラス名の管理を支援するライブラリ
    npm i classnames
    // truly값만 클래스 명으로 사용
classNames('foo','bar') // foo bar
classNames({foo:true},{bar:false}) // foo
classNames(null,false,'bar',undefined,0,1) // bar 1
    cssモジュールと一緒に使用する場合は、バインドが必要です
    const cx = classNames.bind(styles)

<button className={cx('button',{loading: isLoading})} />

    Styled Components


    例:styled-conents,emotion
    モデリングのためにsc-およびhashからなる新しいクラス名を作成します.

    React Shadow


    Shadow DOMを使用してクラス名のグローバル汚染問題を解決する
    Shadow DOM:HTMLで元のファイルに影響しないDOMツリーのコピー
    設定
    npm i react-shadow
    使用
    import root from 'react-shadow'

const styles = `
  /* css 코드 */
`

<root.div>
  // 독립적인 DOM 트리
  <style type="text/css">{styles}</style>
</root.div>
    欠点:毎回stylesを指定して挿入する必要があります.

    Ant Design


    作成した初期化された構成部品の読み込みと使用
    npm i antd @ant-design/icons
    index.js
    import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
    使用するcssのみを分割およびインポートeject以降babel-plugin-importを取り付ける
    "babel": {
  "plugins":[
    [
      "imoprt",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css"
      }
    ]
  ]
}
    Gridレイアウト
    import { Row, Col } from 'antd'

<Row gutter={[16,16]}>
  <Col span={12} offset={12} />
</Row>
  • 溝:水平、垂直ピッチ(px)
  • span:
  • offset:24グリッドでスキップ可能な面積
    • Hudsonプラグイン開発の入門体験
    Goノートの詳細Goのコンパイル実行フロー