Skip to content

Latest commit

 

History

History
328 lines (265 loc) · 7.79 KB

README.md

File metadata and controls

328 lines (265 loc) · 7.79 KB
Raw

MultiTheme

前提条件

  • Node: v16.13.1
  • Npm:v8.1.2
  • [sudo] npm install -g create-react-app
  • create-react-app [project-name] --typescript
    • cd [project-name]
    • npm install
    • npm run start
    • npm install antd --save

方案一

借助多个theme-class实现主题切换

  1. 配置less

    新创建的CRA项目不支持less，需要配置less-loader。此处选择[project-name]/config-overrides.js根目录创建config-overrides.js文件覆盖内部webpack配置，而不是run eject暴露webpack配置文件

    npm install less less-loader --save-dev

    npm install react-app-rewired customize-cra --save-dev

    [project-name]/package.json根目录package.json替换react-scripts => react-app-rewired

    less-loader版本>=8时，有几率报错"TypeError: this.getOptions is not a function"，暂时选择7版本

    // package.json
{
  "name": "mydemo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "antd": "^4.17.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.5.2",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "less": "^4.1.2",
    "less-loader": "^7.3.0",
    "react-app-rewired": "^2.1.8",
    "customize-cra": "^1.0.0"
  }
}
    // config-overrides.js
const { override, addLessLoader } = require("customize-cra");

module.exports = override(addLessLoader({ lessOptions: {} }));

  2. 编写测试代码

    src/index.tsx作为入口文件

    import React from "react";
import ReactDOM from "react-dom";

import App from "./class-demo";

ReactDOM.render(
  <React.StrictMode>
    <>
      <App />
    </>
  </React.StrictMode>,
  document.getElementById("root")
);

    src/App.tsx作为展示文件，ThemeChange切换时，切换class

    import React from "react";
import { Radio } from "antd";

import "./law.css";
import "./theme/index.css";
import "./App.less";

import ThemeChange from "./ThemeChange";

const AppClass = () => {
  return (
    <>
      <div>文本</div>
      <button>按钮</button>
    </>
  );
};

const ThemeChange: React.FC<{
  value: string;
  onChange: (value: string) => void;
}> = ({ value, onChange }) => {
  return (
    <Radio.Group
      optionType="button"
      buttonStyle="solid"
      value={value}
      options={[
        { label: "default", value: "default" },
        { label: "light", value: "light" },
        { label: "dark", value: "dark" },
      ]}
      onChange={(e) => onChange(e.target.value)}
    />
  );
};

const App = () => {
  const [theme, setTheme] = React.useState("default");
  return (
    <div className={theme}>
      <ThemeChange value={theme} onChange={setTheme} />
      <AppClass />
    </div>
  );
};

export default App;

    src/App.less作为样式文件

    button {
  background-color: var(--background-color);
  color: var(--font-color);
}

    src/law.css定义基准颜色变量

    :root {
  /** default */
  --default-background-color: #4062bb;
  --default-font-color: #5d737e;

  /** light */
  --light-background-color: #7e7f9a;
  --light-font-color: #f6f2ff;

  /** dark */
  --dark-background-color: #52489c;
  --dark-font-size: #4b5358;
}

    src/theme文件夹内分别定义lignt.css/dark.css/default.css，以index.css作为统一出口

    // index.css
@import url("./dark.css");
@import url("./default.css");
@import url("./light.css");

// dark.css
.dark {
  --background-color: var(--dark-background-color);
  --font-color: var(--dark-font-color);
}

// light.css
.light {
  --background-color: var(--light-background-color);
  --font-color: var(--light-font-color);
}

// default.css
.default {
  --background-color: var(--default-background-color);
  --font-color: var(--default-font-color);
}

    切换radio按钮样式将会造成按照主题色进行改变

  3. 引入antd组件改造

    npm install babel-plugin-import

    更新config-overrides.js文件

    const { override, addLessLoader, fixBabelImports } = require("customize-cra");

module.exports = override(
  addLessLoader({ lessOptions: { javascriptEnabled: true } }),
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true,
  })
);

    src/App.less增加语句@import "~antd/dist/antd.less";和样式

    @import "~antd/dist/antd.less";

.app {
  color: var(--font-color);
  button {
    background-color: var(--background-color);
  }
}

.antd-app {
  button {
    color: var(--font-color);
  }
  .ant-picker:hover,
  .ant-picker-focused {
    border-color: var(--background-color);
  }
}

    src/App.tsx引入Antd依赖import { Button, DatePicker } from "antd";，修改AppClass

    import { Button, DatePicker } from "antd";

const AppClass = () => {
  return (
    <>
      <div className="app">
        <p>文本</p>
        <button>按钮</button>
      </div>
      <br />
      <div className="antd-app">
        <Button type="link">组件Button</Button>
        <DatePicker />
      </div>
    </>
  );
};

    方案二

    单个主题ModifyVars覆盖

    如果只是希望定制某一种特定主题，可以参考Antd定制主题方案。例如通过less提供的ModifyVars的方式进行Antd组件的样式覆盖。

    给config-overrides.js增加配置

    const { override, addLessLoader, fixBabelImports } = require("customize-cra");

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true,
  }),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: { "primary-color": "#52489c" }, // 示例
    },
  })
);

    App.less中去掉对于Antd组件的样式设置

    @import "~antd/dist/antd.less";

.app {
  color: var(--font-color);
  button {
    background-color: var(--background-color);
  }
}

​ 重新启动项目，因为config-overrides.js是预编译，不会引发热更新，重新启动项目，即可看到效果。