[material-next] Add documentation on how to provide a custom theme for the Material You components

[Onibenjo]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/s/pedantic-architecture-yjt5x5?file=/src/App.js
Steps:

1. Wrap app with ThemeProvider
2. use material-next button
3. app breaks

Current behavior 😯

Cannot read properties of undefined (reading 'color')
But it works fine without the ThemeProvider.
I want to change the theme of the buttons and get the above error

Expected behavior 🤔

It should work fine as the @mui/material button and should also work fine as it does without the ThemeProvider

Context 🔦

No response

Your environment 🌎

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

[ZeeshanTamboli]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://mui.com/r/issue-template), a link to a repository on GitHub, or provide a proper minimal code example that reproduces the problem.

[Onibenjo]

hey @ZeeshanTamboli updated the desc with a CodeSandbox link
Here is it also below
https://codesandbox.io/s/pedantic-architecture-yjt5x5?file=/src/App.js

thanks

[ZeeshanTamboli]

Thank you for the CodeSandbox! You need to provide a theme to the ThemeProvider. The default theme can be obtained from the extendTheme function in @mui/material-next/styles. See https://codesandbox.io/s/pensive-diffie-zyzd4n?file=/src/App.js.

There is currently missing documentation on this. To address that, we can include the documentation on providing a theme for Material You components in the Button and Slider component pages. For instance, we can add it here: https://mui.com/material-ui/react-button/#material-you-version.

[DiegoAndai]

Thanks for reporting this issue, I'll look into adding the proper documentation

[miklepositive]

@ZeeshanTamboli but how to use custom theme colours for Buttons?
I have a theme, wrap it and colours don't work for [material-next] Button, but they work for @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',
                    },
                },
            },
        },
    },

[ZeeshanTamboli]

@ZeeshanTamboli but how to use custom theme colours for Buttons? I have a theme, wrap it and colours don't work for [material-next] Button, but they work for @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 I haven't verified it, but Material Next is still in early development. You could create a new issue with a reproduction to help us track it more effectively.

[DiegoAndai]

@miklepositive, you should be able to modify the Material 3 color tokens; remember that they have a different structure than Material 2: For example, you can modify the primary color via colorSchemes.light.sys.color.primary. Here's an example of how to achieve this: https://codesandbox.io/p/sandbox/late-pond-ht8lqp?file=%2Fsrc%2FApp.tsx%3A13%2C7

The components follow the Material 3 specs, so if you modify the tokens specified there it should work.

I'm sorry we don't have more documentation on this yet. I will try to get it as soon as possible.