如何使用 material-ui/core 主题调色板扩展顺风调色板

Question

我有一个使用@material-ui/core 的create-react-app 项目。如何使用 @material-ui/core 调色板扩展顺风 css 主题颜色。

这是我的 tailwind.config.js 文件，我希望顺风在其中扩展 @material-ui/core 调色板颜色。

const { makeStyles, createStyles } = require('@material-ui/core');

let materialTheme = {};

const useHeaderStyles = makeStyles((theme) => {
  materialTheme = theme; // I'm not able to get this theme
  return createStyles(theme);
});

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        ...materialTheme.palette
      }
    },
  },
  plugins: [],
}

Answer 1

@material-ui/core 颜色是从@material-ui/core/colors 导出的，所以 tailwind.config.js 应该是这样的：

const colors = require('@material-ui/core/colors'); // for mui v4
// const colors = require('@mui/material/colors'); for mui v5

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        ...colors
      }
    },
  },
  plugins: [],
}

如何使用 material-ui/core 主题调色板扩展顺风调色板

How to extend tailwind color palette with material-ui/core theme palette

reactjs

material-ui

tailwind-css