如何用材质-ui/核心主题调色板扩展顺风调色板

Question

我有一个创建-反应-应用程序项目，使用@material/core。如何用@material/core托盘扩展顺风css主题颜色。

这是我的tailwind.config.js文件，我希望顺风扩展@material/核心托盘颜色。

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/core颜色是从@material/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: [],
}