0

我已经customTheme使用createMuiTheme()并在<ThemeProvider>. 现在，我想customTheme在函数内部使用它来制作一些自定义样式makeStyles()。但makeStyles()没有得到我的customTheme. 它获取默认主题。

代码：

import React from 'react';

import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core';

const customTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#f0f'
    },
  }
});

const useStyles = makeStyles((theme) => ({
  box: {
    height: '100px',
    width: '100px',
    backgroundColor: theme.palette.primary.main
  }
}));

export default function App() {

  const classes = useStyles();

  return (
    <ThemeProvider theme={customTheme}>

      <div className={classes.box}>
        makeStyles
      </div>

      <div style={{
        height: '100px',
        width: '100px',
        backgroundColor: customTheme.palette.primary.main
      }}>
        inline style
      </div>

    </ThemeProvider>
  );
}

截图： 截图图片

从截图中可以看出，第一个<div>具有默认的深蓝色 Material-UI 正在使用makeStyles.

第二个<div>具有自定义颜色，即使用内联样式。

那么，我该如何使用customThemein makeStyles()？

4

1 回答 1

0

尝试 ThemeProvider 包裹 App 组件，根据我的理解，提供的主题将应用于包裹在其下的反应组件。因为“makeStyles div”只是一个元素样式并不适用于它。

Codesandbox 链接 - https://codesandbox.io/s/mui-custom-theme-f354x

于 2021-06-01T14:28:24.617 回答