material-ui [material-next] 添加关于如何为Material You组件提供自定义主题的文档

qyswt5oh  于 4个月前  发布在  其他
关注(0)|答案(7)|浏览(49)

重复问题

  • 我搜索了现有的问题

最新版本

  • 我测试了最新版本

重现步骤 🕹

链接到实时示例:
https://codesandbox.io/s/pedantic-architecture-yjt5x5?file=/src/App.js
步骤:

  1. 用ThemeProvider包裹应用
  2. 使用material-next按钮
  3. 应用崩溃

当前行为 😯

Cannot read properties of undefined (reading 'color')
但是在没有ThemeProvider的情况下它可以正常工作。我想更改按钮的主题并获得上述错误

预期行为 🤔

它应该像@mui/material按钮一样正常工作,也应该像没有ThemeProvider的情况下一样正常工作

上下文 🔦

  • 无响应*

你的环境 🌎

npx @mui/envinfo

System:
    OS: macOS 13.3.1
  Binaries:
    Node: 20.2.0 - ~/.nvm/versions/node/v20.2.0/bin/node
    Yarn: Not Found
    npm: 9.6.6 - ~/.nvm/versions/node/v20.2.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.106
    Edge: Not Found
    Firefox: Not Found
    Safari: 16.4
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.4
    @mui/core-downloads-tracker:  5.13.4
    @mui/material: ^5.13.5 => 5.13.5
    @mui/material-next: ^6.0.0-alpha.89 => 6.0.0-alpha.89
    @mui/private-theming:  5.13.1
    @mui/styled-engine:  5.13.2
    @mui/system:  5.13.5
    @mui/types:  7.2.4
    @mui/utils:  5.13.1
    @types/react: ^17.0.0 => 17.0.59
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.9.5 => 4.9.5
nszi6y05

nszi6y051#

看起来这个bug报告没有足够的信息让我们中的一个人复现它。
请提供一个CodeSandbox(https://mui.com/r/issue-template),或者提供一个GitHub仓库的链接,或者提供一个能够复现问题的最小代码示例。

tquggr8v

tquggr8v2#

嘿,@ZeeshanTamboli 更新了描述,附上了CodeSandbox链接。

以下是链接:
https://codesandbox.io/s/pedantic-architecture-yjt5x5?file=/src/App.js

谢谢!

watbbzwu

watbbzwu3#

感谢CodeSandbox!您需要为ThemeProvider提供一个主题。默认主题可以从@mui/material-next/styles中的extendTheme函数获取。请参阅https://codesandbox.io/s/pensive-diffie-zyzd4n?file=/src/App.js

目前缺少关于此的文档。为了解决这个问题,我们可以在ButtonSlider组件页面中添加关于为Material You组件提供主题的文档。例如,我们可以在这里添加:https://mui.com/material-ui/react-button/#material-you-version。

qoefvg9y

qoefvg9y4#

感谢您报告此问题,我将调查添加适当的文档。

ttp71kqs

ttp71kqs5#

@ZeeshanTamboli 但是如何为按钮使用自定义主题颜色?
我有一个主题,包裹它并且颜色不起作用于 [material-next] 按钮,但是它们对于 @mui/material/Button 起作用。

import { extendTheme } from '@mui/material-next/styles';
import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';

const brandTheme = extendTheme(theme);
<CssVarsProvider theme={brandTheme}>
                 <Button color="primary"   variant="contained" />               
        </CssVarsProvider>
theme: {
        colorSchemes: {
            light: {
                palette: {
                    primary: {
                        main: '#1a98be',
                    },
                    secondary: {
                        main: '#C0E8F4',
                    },
                },
            },
        },
    },
r7xajy2e

r7xajy2e6#

@ZeeshanTamboli 但是如何为按钮使用自定义主题颜色?我有一个主题,包裹它并且颜色对于*[material-next]按钮不起作用,但是它们对于@mui/material/Button*起作用。

import { extendTheme } from '@mui/material-next/styles';
import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';

const brandTheme = extendTheme(theme);
<CssVarsProvider theme={brandTheme}>
                 <Button color="primary"   variant="contained" />               
        </CssVarsProvider>
theme: {
        colorSchemes: {
            light: {
                palette: {
                    primary: {
                        main: '#1a98be',
                    },
                    secondary: {
                        main: '#C0E8F4',
                    },
                },
            },
        },
    },

@miklepositive 我还没有验证过,但是Material Next仍然处于早期开发阶段。你可以创建一个新的问题并附上复现情况,以帮助我们更有效地跟踪它。

ybzsozfc

ybzsozfc7#

@miklepositive,你应该能够修改材质3的颜色标记;请记住,它们的结构与材质2不同:例如,你可以通过 colorSchemes.light.sys.color.primary 修改主色调。以下是如何实现这一点的示例:
https://codesandbox.io/p/sandbox/late-pond-ht8lqp?file=%2Fsrc%2FApp.tsx%3A13%2C7
组件遵循 Material 3 specs ,因此,如果你修改了那里指定的标记,它应该可以正常工作。
很抱歉,我们目前还没有关于这个的更多文档。我会尽快获取它。

相关问题