基于 React Scope css 方案

背景

在之前的代码习惯中很多布局都是比较相近的词汇，比如左侧 header，body，foot， 右侧也是 header，body，foot,如果使用 css Modal 的话，由于是扁平化的 key 那么我的 body 就不能确定是当前的 body 属性了，于是想像 vue 一样写,目前没有发现问题如果有问题 联系我哦[email protected]

umijs 引用

...
  chainWebpack(memo, { env, webpack, createCSSRule }) {
    memo.module
      .rule('util-loader')
      .test(/\.tsx$/)
      .exclude.add([
        path.resolve('./src/.umi'),
        path.resolve('./src/pages/.umi'),
        path.resolve('node_modules'),
      ])
      .end()
      .use('react-scoped-css-loaders')
      .loader('react-scoped-css-loaders');
  },

...

其他 webpack 参考 umijs 一样的就不写 demo 了哦

使用

• style-components 的组件名称使用 scoped_css 结尾就行

import { useState } from "react";
import styled from "styled-components";
const WarpBody_scoped_css = styled.div`
  background-color: red;
  .title {
    background-color: red;
  }
  .page {
    background-color: red;
    .title {
      font-size: 16px;
    }
    .kkk {
      color: yellow;
    }
    .body {
      color: red;
    }
    .a {
      .body {
        color: red;
      }
    }
    .b {
      .body {
        color: red;
      }
    }
  }
  .selected {
    color: yellow;
  }
`;

const Page = () => {
  const [state, setState] = useState({
    list: new Array(10).fill(10),
  });
  return (
    <WarpBody_scoped_css>
      <div className={["page", 1 === 2 ? "selected" : ""].join(" ")}>
        <h1 id="13" className="title kkk">
          Page index
        </h1>
        <div className="a">
          <div className="body">
            {state.list.map((curr) => {
              return <div className="item">123123</div>;
            })}
          </div>
        </div>
        <div className="b">
          <div className="body"></div>
        </div>
      </div>
    </WarpBody_scoped_css>
  );
};

export default Page;

输出内容

import * as React from "react";
import { useState } from "react";
import styled from "styled-components";
const WarpBody_scoped_css = styled.div`
  background-color: red;
  .title_nzr4bvxwhm9 {
    background-color: red;
    &:hover {
      color: red;
    }
  }
  .page_69gqcmc3flg {
    background-color: red;
    .title_z8596k3fs9d {
      font-size: 16px;
    }
    .kkk_advufwy9l2t {
      color: yellow;
    }
    .body_y4n5sko7rmd {
      color: red;
    }
    .a_ajrnwmdtqzh {
      .body_wgw9hea428d {
        color: red;
      }
    }
    .b_zdfpa9sdorr {
      .body_upz6zssbmba {
        color: red;
      }
    }
  }
  .selected_yki6w7abcx {
    color: yellow;
  }
`;

const Page = () => {
  const [state, setState] = useState({
    list: new Array(10).fill(10),
  });
  return (
    <WarpBody_scoped_css>
      <div></div>
      <div
        className={[
          "page_69gqcmc3flg",
          1 === 2 ? "selected_yki6w7abcx" : "",
        ].join(" ")}>
        <h1
          id="13"
          className="title_nzr4bvxwhm9 title_z8596k3fs9d kkk_advufwy9l2t">
          Page index
        </h1>
        <div className="a_ajrnwmdtqzh">
          <div className="body_y4n5sko7rmd body_wgw9hea428d">
            {state.list.map((curr) => {
              return <div className="item">123123</div>;
            })}
          </div>
        </div>
        <div className="b_zdfpa9sdorr">
          <div className="body_y4n5sko7rmd body_upz6zssbmba"></div>
        </div>
      </div>
    </WarpBody_scoped_css>
  );
};

export default Page;