Material UI theme override issue - reactjs

Here is my code, I am trying to override the theme of the Material UI react, But somehow it is not getting override, I am getting default colors only. Here is my code.
I have installed proper libraries also, In package JSON i have added "#material-ui/styles": "^4.11.4", and "#material-ui/core": "4.11.4", Which are required. Cleaned install and restart, It looks simple but still not working.
import {ThemeProvider} from '#material-ui/styles';
import Button from '#material-ui/core/Button';
import React from "react";
function App() {
return (
<ThemeProvider theme={theme}>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
</ThemeProvider>
);
}
const theme = createMuiTheme({
palette: {
primary: {
// Purple and green play nicely together.
main: "#000000",
},
secondary: {
// This is green.A700 as hex.
main: '#11cb5f',
},
},
overrides: {
MuiButton: {
textPrimary: {
color: "#efefef"
},
text: {
color: '#000000',
},
containedPrimary: {
backgroundColor: "#9f9f9f"
}
},
},
});
export default App;

You're missing the createMuiTheme import, and you're importing ThemeProvider from the wrong folder.
Try this:
import { createMuiTheme, ThemeProvider } from '#material-ui/core/styles';
You shouldn't really need the #material-ui/styles package at all. Also, make sure to define theme before using the variable in App.

Related

Can not use ubuntu-mono font in chakra-UI

I'm trying to use the ubuntu-mono font in react with chakra-UI. So, I referred to the chakra-UI [docs][1].
However, the change could not be reflected.
My ```theme.ts``` and ```App.tsx``` are below.
theme.ts
import { extendTheme } from "#chakra-ui/react";
const theme = extendTheme({
fonts: {
heading: "Ubuntu-mono",
body: "Ubuntu-mono",
},
styles: {
global: {
body: {
backgroundColor: "black",
color: "white",
}
}
}
})
export default theme;
App.tsx
import * as React from "react"
import {
ChakraProvider, Container,
} from "#chakra-ui/react"
import {BrowserRouter} from "react-router-dom";
import theme from "./theme/theme";
import '#fontsource/ubuntu-mono/700.css';
import {Router} from "./router/Router";
export const App = () => (
<ChakraProvider theme={theme}>
<BrowserRouter>
<Router/>
</BrowserRouter>
</ChakraProvider>
)
Of course, I have run npm install with the package.json that includes the "#fontsource/ubuntu-mono": "^4.5.6" line in its dependencies.
I also referred to another doc of the chakra-UI, however, I could not find out describes regarding this problem.
Although, this may an easy problem, anyone who gives me a solution.
I'm guessing this has to do with the environment. I tried it initially in CodeSandbox but the font didn't load but when I ran it locally using Vite app, it worked just fine.
What environment are you working in? See my repo here: https://github.com/estheragbaje/test-fonts

Material UI v5 - Property 'spacing' does not exist on type 'DefaultTheme' when using a custom theme

I am using material ui version 5, i have a custom theme which i have wrapped in all my components around.
In one of my components i am trying to give paper some padding based on my theme, however i get the following error.
Property 'spacing' does not exist on type 'DefaultTheme'
<AppProvider>
<Theme>
<Layout>
<ProtectedRoute>
<Component {...pageProps} />
</ProtectedRoute>
</Layout>
</Theme>
</AppProvider>
campaign.tsx
const useStyles = makeStyles((theme) => ({
paper: {
padding: theme.spacing(3),
},
}));
export default function Campaign(props: ICampaginProps): ReactElement | null {
const classes = useStyles();
theme.tsx
const DEFAULT_THEME = createTheme({
typography: {
fontSize: 12,
},
palette: {
mode: "light",
primary: {
main: "#212121",
},
secondary: {
main: "#fafafa",
},
},
});
Have you tried this suggestion from the MUI migration documentation:
[Types] Property "palette", "spacing" does not exist on type 'DefaultTheme'
Since makeStyles is now exported from #mui/styles package which does
not know about Theme in the core package. To fix this, you need to
augment the DefaultTheme (empty object) in #mui/styles with Theme from
the core.
TypeScript Project
Put this snippet to your theme file:
// it could be your App.tsx file or theme file that is included in your tsconfig.json
import { Theme } from '#mui/material/styles';
declare module '#mui/styles/defaultTheme' {
// eslint-disable-next-line #typescript-eslint/no-empty-interface (remove this line if you don't have the rule enabled)
interface DefaultTheme extends Theme {}
}
Javascript Project
If your IDE (ex. VSCode) is able to infer types from d.ts file,
create index.d.ts in your src folder with this snippet:
// index.d.ts
declare module "#mui/private-theming" {
import type { Theme } from "#mui/material/styles";
interface DefaultTheme extends Theme {}
}

Background color is not applying using react native paper PaperProvider custom theme solution

Recently I was trying to use react native paper library in my application. But when I try to add background color using their custom theme option in PaperProvider component, Then it is not working. Can someone please help me to fix this I have to apply custom background color on complete screen using custom theme in react native paper PaperProvider.Below is my source code.
import * as React from 'react';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import { SafeAreaView, StyleSheet, View } from 'react-native';
export default function Main() {
const mainTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
primary: 'tomato',
accent: 'yellow',
background: 'red'
},
};
return (
<PaperProvider theme={mainTheme}>
</PaperProvider>
);
}

Property 'palette' is not recognised by DefaultTheme from MaterialUI, it stopped to work once material ui have been moved from v4 to v5

I'm moving app from Material UI v4 to v5 and I'm facing few issues.
One of them is that property 'palette' in not recognised by DefaultTheme from Material UI once it's used in makeStyles. That component worked properly in v4, but once I moved majority to v5 it shows me an error now and don't recognise 'palette' property. Can You please look at it and let me know how to fix it ?
this is how it's called in main component:
import { makeStyles } from '#mui/styles';
const useStyles = makeStyles((theme) => ({
styledButton: {
'&': { color: theme.palette.cerulean },
'&.Mui-selected': {
backgroundColor: theme.palette.aliceBlue,
color: theme.palette.cerulean,
},
'&:hover': {
backgroundColor: 'rgba(227,245,255, 0.5) !important',
},
},
}));
When I hover over above 'palette' TS give a comment like: Property 'palette' does not exist on type 'DefaultTheme'.
Theme is called in App as below:
import { ThemeProvider } from '#mui/styles';
import { MainTheme } from '#nevomo/utilities';
export const App: FC = () => (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={MainTheme}>
<SCThemeProvider theme={MainTheme}>
<CssBaseline />
<Router>
<AuthContextProvider>
<Notifications />
<RoutingManager />
</AuthContextProvider>
</Router>
</SCThemeProvider>
</ThemeProvider>
</StyledEngineProvider>
);
MainTheme looks like:
import { createTheme, Theme } from '#mui/material/styles';
import { paletteColors } from './main-theme-colors';
export const MainTheme: Theme = createTheme({
spacing: (factor: number) => `${factor * 1}rem`,
palette: {
primary: {
main: paletteColors.primary.main,
},
secondary: {
main: paletteColors.secondary.main,
},
error: {
main: paletteColors.error.main,
},
white: '#FFFFFF',
lighterBlue: '#EFFBFF',
lightBlue: '#DEF7FF',
celeste: '#00A7E1',
blue: '#0027d3',
navy: '#083D77',
greenSalad: '#4DA167',
red: '#d32f2f',
pink: '#FFE3E3',
lightPink: '#ECD6E6',
darkPink: '#700353',
black: '#000000',
orange: '#FD5C01',
darkRed: '#AD160B',
aliceBlue: '#E3F5FF',
cerulean: '#007CBA',
},
});
thanks a lot !
The OP resolved their issue, but I'll leave this from the MUI migration documentation for future people facing the same problem:
[Types] Property "palette", "spacing" does not exist on type 'DefaultTheme'
Since makeStyles is now exported from #mui/styles package which does
not know about Theme in the core package. To fix this, you need to
augment the DefaultTheme (empty object) in #mui/styles with Theme from
the core.
TypeScript Project
Put this snippet to your theme file:
// it could be your App.tsx file or theme file that is included in your tsconfig.json
import { Theme } from '#mui/material/styles';
declare module '#mui/styles/defaultTheme' {
// eslint-disable-next-line #typescript-eslint/no-empty-interface (remove this line if you don't have the rule enabled)
interface DefaultTheme extends Theme {}
}
Javascript Project
If your IDE (ex. VSCode) is able to infer types from d.ts file,
create index.d.ts in your src folder with this snippet:
// index.d.ts
declare module "#mui/private-theming" {
import type { Theme } from "#mui/material/styles";
interface DefaultTheme extends Theme {}
}
Current MUI version fixes the DefaultTheme type error this way—
// global.d.ts
import { Theme } from '#mui/material/styles';
declare module '#mui/system' {
interface DefaultTheme extends Theme {}
}
I'm using v4 and I was hitting this issue.
The issue was because I was using
import { useTheme } from '#material-ui/styles';
instead of
import { useTheme } from '#material-ui/core/styles';

How to disable Material-UI contrast ratio console errors?

My console is full of
Material-UI: the contrast ratio of 2.590660811372324:1 for #fff on #5EB44B
falls below the WCAG recommended absolute minimum contrast ratio of 3:1.
error messages which I would like to hide. Is there a way how to do that? I've done the research but could find anything useful.
Here is my createMuiTheme code
createMuiTheme({
themeName: 'radovix',
palette: {
primary: {
main: '#5EB44B'
}
},
contrastThreshold: 2
});
Note, I'm aware that best approach would be changing the colors that I'm using and therefore solving the error, but that is not possible in my case.
This console error is produced by getContrastText which is used whenever a contrastText color is not explicitly specified.
Instead of specifying contrastThreshold: 2, I would recommend explicitly specifying the desired contrastText color for those cases where the default contrastThreshold of 3 does not pick the one you want. Customization of contrastThreshold is really only intended for increasing the threshold -- not for decreasing it.
Here's a working example:
import React from "react";
import { createMuiTheme, ThemeProvider } from "#material-ui/core/styles";
import Button from "#material-ui/core/Button";
import { common } from "#material-ui/core/colors";
const theme = createMuiTheme({
palette: {
primary: {
main: "#5EB44B",
contrastText: common.white
}
}
});
export default function App() {
return (
<ThemeProvider theme={theme}>
<Button color="primary" variant="contained">
Primary Color Button
</Button>
</ThemeProvider>
);
}

Resources