/styles/withStyles defaultTheme 选项，不能设置自定义主题

Posted 2023-02-21

【中文标题】/styles/withStyles defaultTheme 选项，不能设置自定义主题

【英文标题】：/styles/withStyles defaultTheme option, can't set custom theme

【发布时间】：2019-09-10 20:39:27

【问题描述】：

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

新材料-ui/styles/withStyles (mui v4-alpha) 有额外的选项defaultTheme，它被通过的一个覆盖，我试图用myTheme 重置defaultTheme，但没有运气。请帮助我实现这一目标。

这是我目前正在尝试的。

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 颜色作为主要颜色。我做错了什么？提前致谢！

附：如果我将<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，类似于我导入核心组件的方式）

【问题讨论】：

我不明白您为什么不想使用主题提供程序包装器。我认为 API 建议您使用他们自己的 MuiTheme 来明智地重新设计组件主题。

我想要一个包含一组组件的库（其中一些将使用 MUI，而另一些则不使用）。因此，当我在另一个项目中从我的库中导入这些组件时，我不想在另一个项目中添加额外的包装器。与 MUI 类似...您导入组件，默认情况下（如果顶部没有 ThemeProvider），它将使用一些默认样式呈现。

【参考方案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;

【讨论】：

请注意，您不必使用withStyles

您甚至可以创建一个包含您想要的所有样式主题选项的组件，并接收其他组件作为道具。因此，您可以在更多组件中重用您的主题。

感谢您的回复！关于内联：1）我希望在 css 操作（withStyles）范围内有 theme 对象。虽然使用内联，但应该可以将样式作为函数并传递给那里的主题（withTheme）。 2）不喜欢内联css :)。关于组件包装。我试过了，但似乎不是一个好主意。当您在页面上添加 10 个按钮时，所有这 10 个按钮的 css 都将添加到 DOM 中。 BaseButton_css *10 + MuiButton_css*10 + CustomButton_css*10 = 30个内容相同的脚本标签（css相同，classNames不同后缀）

我放弃了 :) 看起来没有简单的方法可以实现我想要的。猜猜唯一干净又好的解决方案是在应用程序顶部使用ThemeProvider 包装我的所有应用程序。

我认为你可以尝试使用我从未做过的东西，props.children 属性，这样你就可以定义一个主题并将所有 10 个按钮作为道具注入，只加载一次 css 文件。例子可以看***.com/questions/49706823/…