Trying to update globally the height property for all the toolbars I use, but it doesn't seem to work. The references I'm using are https://mui.com/customization/theme-components/ and https://mui.com/api/toolbar/. From there I have this:
const myTheme = createTheme({
components: {
MuiToolbar: {
root: {
height: '50px',
minHeight: '50px',
maxHeight: '50px'
}
}
}
})
Also tried:
const myTheme = createTheme({
components: {
'MuiToolbar-root': {
height: '50px',
minHeight: '50px',
maxHeight: '50px'
}
}
})
Also not working. Both times it continues showing the default theme toolbar. What am I missing here?
You need to use styleOverrides key to change styles injected by MUI into the DOM.
So, something like this should work :
const myTheme = createTheme({
components: {
MuiToolbar: {
styleOverrides: {
regular: {
height: "12px",
width: "20px",
height: "32px",
minHeight: "32px",
"#media (min-width: 600px)": {
minHeight: "48px",
},
backgroundColor: "#ffff00",
color: "#000000",
},
},
},
},
});
Related
I am creating a webpage using mui and and nextjs with typescript. Here I create two separate folder for using mui.
That's why I create a Styles folder-
Single.styles.ts Here I defin my all styles-
export default {
Title: {
fontSize: "18px",
pb: "10px",
mb: "20px",
borderBottom: `1px solid ${theme.palette.primary.border_bottom}`,
position: "relative",
fontWeight: 500,
"&:after": {
content: '""',
position: "absolute",
width: "25%",
bgcolor: "primary.main",
height: "2px",
left: "0",
bottom: "0"
}
},
}
And then I import it in my component I use it-
Single.tsx (Component)
//Styles
import styles from "Styles/Home/SingleTop.styles";
const SingleTop = () => {
return (
<Box>
<Typography variant="h6" component="h6" sx={styles.Title}>
This is title
</Typography>
</Box>
);
};
export default SingleTop;
And it's working perfectly.
Now I am trying to do responsiveness in this webpage. I already search it and I found it-
https://mui.com/material-ui/customization/breakpoints/
From This documentation I am facing two problems. I changes my Single.styles.ts file according to that documentation like this-
const styles = (theme) => ({
Title: {
fontSize: "18px",
pb: "10px",
mb: "20px",
borderBottom: `1px solid ${theme.palette.primary.border_bottom}`,
position: "relative",
fontWeight: 500,
"&:after": {
content: '""',
position: "absolute",
width: "25%",
bgcolor: "primary.main",
height: "2px",
left: "0",
bottom: "0"
},
[theme.breakpoints.up('lg')]: {
}
}
})
export default styles;
And here I found two error. One is type difination for theme. Here How can I define types for this-
const styles = (theme: //Types)=> ({});
My second problem is Where I use this styles in my component by using sx-
sx={styles.Title}
I found this error here-
Property 'Title' does not exist on type '(theme: any) => {}
Please help me how can I solve that problem. How can I apply them perfectly? What is the right way?
I cannot change font-color in TextField Material UI component. I try to do it using createTheme() and when I add class '& .MuiOutlinedInput-input' in code sandbox font-color changes as it should, but when I apply it to the app code it doesn't work.
Will appreciate Your support.
Below is the implementation:
const theme = createTheme({
components: {
MuiOutlinedInput: {
styleOverrides: {
root: {
backgroundColor: `#EDEDED`,
'& .MuiOutlinedInput-notchedOutline': {
border: 'none',
},
'&.Mui-focused': {
'& .MuiOutlinedInput-notchedOutline': {
border: 'none',
},
},
'& .MuiOutlinedInput-input': {
padding: '10px',
fontSize: '13px',
color: 'red',
},
},
},
},
},
});
<ThemeProvider theme={theme}>
<InputForm
name={'phoneNumber'}
id={'phoneNumber'}
label={phoneNumberLabelTxt}
disabled={isDisabledInputs}
/>
</ThemeProvider>
Your code worked in my local repo. however if its not working for you then try below code which also worked for me.
'&.MuiOutlinedInput-root': { // no space between & and .
padding: '10px',
fontSize: '13px',
color: 'red',
},
Recently I upgraded my material UI version from 3.9.4 to 4.11.0, I had to replace these on the theme style override:
to avoid these warnings:
But I require to put that fontSize styles wit !important since that's working on a widget which is rendered on different web pages and if I don't use the !important, then the styles are overritten by the ones of the page, Is there a way to use !important label on the typography fontSize style on the latest versions?
I tried using fontSize: `16 !important`, and fontSize: [[16], ['!important']
without success.
any help would be welcome, Thanks in advice!!!
EDIT:
On the override part it receives the styles even as a string but on the typography part, even using #Ryan Cogswell suggestion, it still throw me the same warning
const Theme = createMuiTheme({
root: {
display: 'flex',
},
palette: {
primary: {
main: '#052d4f',
},
secondary: {
main: '#2376b8',
},
},
typography: {
fontFamily: 'Arial, Helvetica, sans-serif !important',
fontSize: [16, "!important"],
},
overrides: {
MuiTypography: {
body2: {
fontFamily: 'Arial, Helvetica, sans-serif !important',
fontSize: "16px !important",
},
subtitle1: {
fontFamily: 'Arial',
fontSize: "16px !important",
},
},
MuiTablePagination: {
toolbar: {
fontSize: "14px !important",
}
},
MuiAutocomplete: {
root: {
paddingLeft: "15px",
paddingRight: "15px",
},
groupLabel: {
fontWeight: 700,
color: "black",
fontSize: "14px !important",
},
option: {
paddingTop: "0px",
paddingBottom: "0px",
fontSize: "14px !important",
height: "25px"
}
}
},
status: {
danger: 'orange',
},
});
The syntax you want is fontSize: [16, "!important"]. It also works to put the 16 within an array, but you can't put "!important" in an array.
Here's a working example:
import React from "react";
import { ThemeProvider, createMuiTheme } from "#material-ui/core/styles";
import Typography from "#material-ui/core/Typography";
const theme = createMuiTheme({
//v5.0.0
typography: {
body2: {
fontSize: [16, "!important"]
}
},
//older versions
overrides: {
MuiTypography: {
body2: {
fontSize: [16, "!important"]
}
}
}
});
export default function App() {
return (
<ThemeProvider theme={theme}>
<div className="App">
<Typography variant="body2">Hello CodeSandbox</Typography>
</div>
</ThemeProvider>
);
}
JSS Documentation: https://cssinjs.org/jss-syntax?v=v10.4.0#modifier-important
I have this MUI codes that are applied to multiple components. I want to separate it into a single file like 'MuiSetup.js' and then import the file to the component that I am using. I've tried with as React component, however, it does not work and I have zero clues how can I do this.
// Styling TextField
const ValidationTextField = withStyles({
root: {
'& input:valid + fieldset': {
borderColor: '#ff9800',
borderWidth: 1,
},
'& .MuiOutlinedInput-root': {
'&:hover fieldset': {
borderColor: '#ff9800',
},
'&.Mui-focused fieldset': {
borderColor: '#ff9800',
},
},
'& input:invalid + fieldset': {
borderColor: '#ff9800',
borderWidth: 1,
backgroundColor: 'black',
},
'& input:valid:focus + fieldset': {
borderColor: '#ff9800',
borderLeftWidth: 5,
padding: '4px !important', // override inline-style
},
},
})(TextField);
//Style MUI
const useStyles = makeStyles((theme) => ({
root: {
height: '100vh',
backgroundColor: 'black',
},
input: {
color: '#ff9800',
},
formBackground: {
background: 'black',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
},
paper: {
margin: theme.spacing(8, 4),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
},
form: {
width: '100hv',
height: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(0),
color: '#ff9800',
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
//Label Style
const useLabelStyles = makeStyles({
root: {
color: '#ff9800',
'&.Mui-focused': {
color: '#ff9800',
},
fontSize: '14px',
},
});
-----------
const App = () => {......}
export default App
How can I take the MUI part to the separated file?
In one of my projects I actually used createMuiTheme() in another file then added my own classes under the overrides. Then the entire app is wrapped in the ThemeProvider which you pass in your custom theme. Then you can just give the component a className.
So my MuiSetup.js equivalent file looks something like this:
import { createMuiTheme } from '#material-ui/core';
// Describe material ui theme
export const customTheme = (isDark = false) => {
return createMuiTheme({
palette: isDark
? {
common: {...},
background: {...},
primary: {...},
secondary: {...},
error: {...},
text: {...},
}
: {// Light theme stuff},
overrides: {
MuiAppBar: {...},
MuiButton: {
// Button example...
root: {
'&.CustomButton': {
margin: 0,
},
'&.OtherCustomButton': {
width: '100%',
minHeight: 'inherit',
},
'&$disabled': {
color: grey[600],
},
},
outlinedSecondary: {
'&$disabled': {
border: `1px solid ${grey[600]}`,
},
},
},
// Other mui components...
},
});
};
You'll need to read the API docs to find your inputs.
Then the ThemeProvider:
import React, { Component } from 'react';
import { ThemeProvider } from '#material-ui/core';
import { customTheme } from './MuiSetup.js';
class App extends Component {
render() {
const currentTheme = customTheme(true);
return (
<ThemeProvider theme={currentTheme}>
<h1>My app</h1>
// Usage
<Button className='CustomButton'/>
</ThemeProvider>
);
}
}
export default App;
Then from any component within the app, you can do: <Button className='CustomButton'/> as I've done above.
Not sure if this is the best way, might be a bit tricky to make multiple updates however you could do something similar in your situation and create a function in another file that returns your custom makeStyles.
HTH
Ciao, to put these customizations in a separated file is just necessary to define them in aseparated file with the key "export const ..." and then, when you want to import them, just write:
import { ValidationTextField } from "./muiCustomizations"; // supposing that you defined your customizations in a file called muiCustomizations.js
and then you can use them:
function MyComponent() {
return (
<div>
<ValidationTextField />
</div>
);
}
Here a codesandbox example.
I am trying to create a global theme with shared styles between component, so i don't need to repeat the same classes in each component, so i have a theme file:
export default {
palette: {
primary: {
light: '#039be5',
main: '#01579b',
dark: '#b22a00',
contrastText: '#fff'
},
secondary: {
main: '#004d40',
contrastText: '#fff'
}
},
typography: {
userNextVariants: true
},
form: {
textAlign: 'center',
},
img: {
maxWidth: 60,
margin: '1.5rem auto 5px'
},
textField: {
margin: 20
},
button: {
marginTop: 16,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
margin: 'auto',
width: 80,
height: 50
},
customError: {
color: 'red',
fontSize: '0.7rem'
},
small: {
display: 'block',
marginTop: '1rem'
},
circularProgress: {
color: '#fff',
position: 'absolute'
}
}
and in App.js
import themeFile from './theme';
import createMuiTheme from '#material-ui/core/styles/createMuiTheme';
import {MuiThemeProvider} from '#material-ui/core/styles';
const theme = createMuiTheme(themeFile);
<MuiThemeProvider theme={theme}>
<Signin />
</MuiThemeProvider>
in Signin page:
import makeStyles from '#material-ui/core/styles/makeStyles';
const useStyles = makeStyles(theme => ({
...theme
}));
const Signin = (props) => {
const classes = useStyles();
return //some form and style elements using classes
}
But i get an error TypeError: color.charAt is not a function, i don't know if i am doing it right, i tried to use withStyles but ii got the same error, what is wrong in my code?
Ciao, the problem is on color in customError. You cannot use 'red' in material ui theme. Try to replace it with #FF0000.
I found a solution for my problem, is by wrapping all properties other than pallette in an object like this
theme.js
export default {
palette: {
primary: {
light: '#039be5',
main: '#01579b',
dark: '#b22a00',
contrastText: '#fff'
},
secondary: {
main: '#004d40',
contrastText: '#fff'
}
},
spread: {
typography: {
userNextVariants: true
},
form: {
textAlign: 'center',
},
img: {
maxWidth: 60,
margin: '1.5rem auto 5px'
},
textField: {
margin: 20
},
button: {
marginTop: 16,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
margin: 'auto',
width: 90,
height: 50
},
customError: {
color: '#FF0000',
fontSize: '0.7rem'
},
small: {
display: 'block',
marginTop: '1rem'
},
circularProgress: {
color: '#fff',
position: 'absolute'
}
}
}
Signin page
const useStyles = makeStyles(theme => ({
...theme.spread
}));