Open Onibenjo opened 1 year ago
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.
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
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.
Thanks for reporting this issue, I'll look into adding the proper documentation
@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 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.
@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.
Duplicates
Latest version
Steps to reproduce 🕹
Link to live example: https://codesandbox.io/s/pedantic-architecture-yjt5x5?file=/src/App.js Steps:
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 errorExpected behavior 🤔
It should work fine as the
@mui/material
button and should also work fine as it does without the ThemeProviderContext 🔦
No response
Your environment 🌎
``` 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 ```npx @mui/envinfo