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

【问题标题】：How to extend tailwind color palette with material-ui/core theme palette如何使用 material-ui/core 主题调色板扩展顺风调色板
【发布时间】：2022-01-05 07:43:49
【问题描述】：

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

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

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: [],
}

【问题讨论】：

标签： reactjs material-ui tailwind-css

【解决方案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: [],
}

【讨论】：