Question

尝试将自定义主题选项与默认选项合并，以便我的自定义组件将使用我的主题，而无需使用ThemeProvider包装器。

新的material-ui / styles / withStyles（mui v4-alpha）具有附加选项defaultTheme，该选项被传递的选项覆盖，我正尝试将defaultTheme重置为myTheme ，但没有运气。请帮助我实现这一目标。

这是我目前正在尝试的。

import React from 'react'
import Button from '@material-ui/core/Button'
import { createMuiTheme } from '@material-ui/core/styles'
import { withStyles } from '@material-ui/styles'

const styles = (theme) => {
  // here i'm getting myTheme with red palette.primary.main
  console.log(theme)
  return {}
}

export const MyButton = (props) => <Button {...props}/>

// reset primary color to red, so MyButton primary will be always red. 
// Here i mean much more complex extend with props and overrides keys (not only palette) 
const myTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#ff0000',
    }
  }
})

export default withStyles(styles, {defaultTheme: myTheme})(MyButton)

但是最后，我的MyButton仍使用默认的蓝色mui颜色作为主要颜色。我做错了什么？预先感谢！

P.S。如果我将<Button...包装到<ThemeProvider theme={myTheme}><Button...中，则所有的红色按钮都很好。

------------------编辑＃1 ------------------

由于以下原因，我的代码似乎无法正常工作。

默认核心Button组件本身使用相同的withStyles包装函数，而没有defaultTheme选项（仅名称选项）export default withStyles(styles, { name: 'MuiButton' })(Button);。意味着Button本身将使用默认主题import defaultTheme from './defaultTheme';（withStyle.js）。

这意味着我可以对自己的组件使用withStyle defaultTheme选项，但不能对现有核心使用一次。

然后我还有另一个问题... 是否可以将myTheme（defaultTheme的扩展名）应用于默认的核心MUI组件？（想将myButton导入其他地方而不需要ThemeProvider，类似于我导入核心组件的方式）

Answer 1

我相信，如果不更改API的核心，就无法做到这一点，它是使用默认主题实现的，并且使用MuiThemeProvider来更改它的方式与您已经做的一样。您可以做的是在组件内部使用主题提供程序，然后将其导出，然后在其他代码中使用它时，则无需将其包装起来。像这样：

import React from 'react'
import Button from '@material-ui/core/Button'
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';

const theme = createMuiTheme({
  palette: {
    primary: { main: purple[500] },
  },
});

function CustomButton() {
  return (
    <MuiThemeProvider theme={theme}>
      <Button color="primary">example</Button>
    </MuiThemeProvider>
  );
}

export default CustomButton;

如果是一次性更改，则可以将内联样式用于：

import React from 'react';
import Button from '@material-ui/core/Button';

const style = {
  minWidth: "200px",
  height:   "50px",
  padding:  "0 30px",
  fontSize: "1.125rem",
  lineHeight:   "50px",
  borderRadius: "3px",
  textAlign:    "center",
  textTransform:    "uppercase",
  transition:   "color 0.4s, background-color 0.4s, border-color 0.4s",
  letterSpacing: "0.05rem",
  textIndent: "0.1rem",
  textDecoration: "none",
  cursor: "pointer",
  overflow: "hidden",
  color: "#ffffff",
  backgroundColor: "#0096d6",
  border: "1px solid #0096d6",
};

function CustomButton() {
  return (
    <Button style={style}>example/Button>
  );
}

export default CustomButton;

/ styles / withStyles defaultTheme选项，无法设置自定义主题

1 个答案: