I am writing styleOverrides to MuiCheckBox and want to make its borders as linear gradient. Any ideas how to make it possible?
MuiCheckbox: {
styleOverrides: {
root: {
color: 'linear-gradient(89.38deg, #957947 -13.88%, #E1BC6C 27.59%, #EFDB7C 66.54%, #E9BA6A 105.86%)',
backgroundColor: 'transparent',
}
}
You can add borderColor property to your root like this,
root:{
borderColor: 'linear-gradient()'
}
Something I use and I am converting our whole app to in order to do the migration from MUI 4 to 5, is component overrides.
So say you have a or component. Basically in like a styled.js file, you can do:
import { withStyles } from '#material-ui/core';
import { MenuItem } from '#material-ui/core';
const MenuItemStyled = withStyles((theme) => ({
root: {
borderColor: 'yourGradient'
}
})(MenuItem);
export { MenuItemStyled }
(in jsx file like 'index.js')
import MenuItemStyled from './styled';
import Menu from '#material-ui/core';
<Menu>
<MenuItemStyled value={blah}>blah</MenuItemStyled>
<MenuItemStyled value={blahblah}>blahblah</MenuItemStyled>
</Menu>
I find this gives you more root access to component styles without having to dig through specific classnames in the inspector. When overriding components like this is checks for your custom styles first before render and it just makes everything significantly easier. Plus in MUI 5 useStyles is depricated, so you'll want to do it this way regardless in order to keep your app current.
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>
);
}
Im trying to make a header in NextJS but this keeps happenning:
I tried to use 100% width, 100% height.
My code:
import type { NextPage } from 'next';
import { Fragment } from 'react';
import Header from '../../components/Header';
const Home: NextPage = () => {
return (
<Fragment>
<Header />
<div>Home</div>
</Fragment>
);
};
export default Home;
The header component(its a div with background color black):
import { Container } from './styled';
const Header = () => {
return <Container>HEADER</Container>;
};
export default Header;
From your code looks like there are 2 possible ways that this can go wrong.
Scenario #01:
Check if there's some global style rules with matching styles i.e background:black in your globals.css (located in styles folder)
Scenario #02
You have the following container being imported in your component.
import { Container } from './styled';
Try commenting this out and then wrap the content in a fragment i.e
<Fragment> HEADER </Fragment>
If this solves the issue of black-background then it means there's something wrong about the container component imported.
Based on the screenshot of the devtools it looks like there's a 8px margin on the background for some reason.
Look in your CSS files if you have any rules that do that.
If this isn't from you, override it by adding a rule in your css like
body {
margin: 0;
}
I just started using Material UI 5.0.4 (with styled-components), and I wanted to access the theme in a component. I looked online and saw useTheme, so I checked the docs and found it - #mui/styles/useTheme. However, it was the legacy documentation, and #mui/styles does not exist in MUI 5. So, I looked at #mui/system instead, and found the section "Accessing the theme in a component". However, this just points back to the legacy documentation!
After the docs didn't seem to help me, I decided to use Visual Studio Code's "Quick Fix" feature, where if you hover over the function, VSCode will give you a list of options to import. Here is the list of options I tried, and why they didn't work:
#mui/material/styles/useTheme - Returns the default theme object, no matter what. Looking into the source code, this is literally what it does - it switches to the default theme, and then returns the theme.
#mui/material/private-theming/useTheme - This just returns null. I feel like I shouldn't be accessing this anyway (it says private-), but I tried it anyway.
#mui/system/useTheme - This is what I was hoping would work. However, this is also probably the weirdest one. It gives me the default theme, but it excludes many properties. For example, it only provided palette.mode, and there are no other keys under palette than that. (You can see the whole thing below)
{
"breakpoints": {
"keys": ["xs", "sm", "md", "lg", "xl"],
"values": { "xs": 0, "sm": 600, "md": 900, "lg": 1200, "xl": 1536 },
"unit": "px"
},
"direction": "ltr",
"components": {},
"palette": { "mode": "light" },
"shape": { "borderRadius": 4 }
}
styled-components/useTheme - Returns undefined.
#mui/styled-engine-sc/useTheme - Returns undefined. (I have a feeling this is the same thing as styled-components/useTheme.)
Those were all the suggestions that VSCode could give me, apart from things like #mui/system/useTheme vs #mui/system/useTheme/useTheme (which is the same thing). I also tried googling stuff but it would always be really old, like:
Issue #8958 on GitHub for MUI which references #material-ui/core/styles which is v4 and not in v5
SO question labelled "access the theme from outside material-ui component" which references the legacy docs (#material-ui/styles does not exist anymore, and #mui/material/styles/useTheme does not work as explained above)
Please, if someone knows, how do you get the theme in a component in MUI 5?
It turns out that the correct useTheme is #mui/material/styles/useTheme, and you cannot use useTheme in the same component that you do the ThemeProvider in. For example, this:
const App = () => {
const theme = useTheme();
return (
<ThemeProvider theme={myTheme}>
<Box bgcolor={theme.palette.background.default} width={100} height={100} />
</ThemeProvider>
);
};
Will not work properly. However, this:
const MyComponent = () => {
const theme = useTheme();
return <Box bgcolor={theme.palette.background.default} width={100} height={100} />;
};
const App = () => (
<ThemeProvider theme={myTheme}>
<MyComponent />
</ThemeProvider>
)
Will work properly, as useTheme is used in a separate component.
Just in case anyone wonder why you can't use useTheme in the same component as
ThemeProvider, it is because useTheme has to be in a component wrapped by ThemeProvider. The context isn't available to components outside of that component tree.
For anybody still struggling with this, I got it working by importing createTheme, ThemeProvider and useTheme all directly from #mui/material...
theme.js:
import { createTheme } from '#mui/material';
export const theme = createTheme({
...
});
_app.tsx (I'm using next.js)
import { CssBaseline, ThemeProvider } from '#mui/material';
import type { AppProps } from 'next/app';
import React from 'react';
import { theme } from '../theme';
function MyApp({ Component, pageProps }: AppProps) {
return (
<React.StrictMode>
<CssBaseline />
<ThemeProvider theme={theme}>
<Component {...pageProps} />
</ThemeProvider>
</React.StrictMode>
);
}
export default MyApp;
navigation.tsx (my component with useTheme)
import { Drawer, useTheme } from '#mui/material';
import React from 'react';
const Navigation = (): JSX.Element => {
const theme = useTheme();
const drawerSx = {
'& .MuiDrawer-paper': {
background: `linear-gradient(to bottom right, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,
},
};
return (
<Drawer sx={drawerSx} variant="permanent">
...
</Drawer>
);
};
export default Navigation;
I was struggling before I did this, it was only applying the default theme, not the custom one.
If you are using the useTheme from #mui/material/styles and is still not working check if you un your AppTheme.jsx (or where you are using the ThemeProvider) check that you are using the ThemeProvider from #mui/material/styles and not the ThemeProvider of #emotion/react. That why in my case (using MUI v5) useTheme wasn't working with my own theme (in particular with my custom breakpoints).
As already answered, your first usage of useTheme must be wrapped inside ThemeProvider in a parent component.
(useTheme needs a theme provider to draw from.)
Technically, you can useTheme in the same component as ThemeProvider, as long as the component is used in a parent component that wraps it with ThemeProvider
Example:
const InnerComponent = () => {
// Use the theme from `App` below
const appTheme = useTheme();
// Local Theme. (May want to wrap with `useMemo` too.)
const innerTheme = createThemeV5(appTheme, {
// Local theme overrides
});
return (
<ThemeProvider theme={innerTheme}>
<Box />
</ThemeProvider>
);
}
const App = () => {
return (
<ThemeProvider theme={myTheme}>
<InnerComponent />
</ThemeProvider>
);
};
I am working with a react native application, and it shows a warning in the console
import {createStackNavigator} from 'react-navigation-stack';
import {fromRight} from 'react-navigation-transitions';
const ApplyNowNav = createStackNavigator(
{
Home,
Profile,
},
{
headerMode: 'none',
transitionConfig: () => fromRight(),
}
);
WARN Deprecation in 'createStackNavigator':
transitionConfig' is removed in favor of the new animation APIs
Is there any solution to fix this issue?
You need to update your code to use to use the new Animation API: https://reactnavigation.org/docs/en/stack-navigator.html#animations
From the code you posted, you can change it to the following instead to have a slide from right animation:
import { createStackNavigator, TransitionPresets } from 'react-navigation-stack';
const ApplyNowNav = createStackNavigator(
{
Home,
Profile,
},
{
headerMode: 'none',
defaultNavigationOptions: {
...TransitionPresets.SlideFromRightIOS,
},
}
);
Update react-navigation and use creatStackNavigator component instead of StackNavigator.
Check current methods and syntax, there is a lot of changes compare to previous syntax.
Works for me when I updated the code