I have a React mui theme with a custom scrollbar like this:
ui.material.createTheme({
components: {
MuiCssBaseline: {
styleOverrides: {
'::-webkit-scrollbar': {
width: '100px'
}
}
}
}
});
Then I use a Dialog. This adds padding-right and overflow to the body:
At this point padding-right: 19px is incorrect. It should be 100px. What is the appropriate location to override these styles in mui? I'm aware I can add a CSS override for this situation but I'd like to solve in the proper, supported way, that mui probably provides somehow.
Related
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.
I'm trying to style my MaterialTable component. Some of the components are easy to do so because you can override the styles with createMuiTheme(). What I really have are two components, MuiFormControl and MTableToolbar, and I want to put them inline.
I did sucessfully with MuiFormControl:
const getMuiTheme = () =>
createMuiTheme({
overrides: {
MuiFormControl: {
root: {
display: 'inline-block'
}
}
}
});
However I am unable to do the same with MTableToolbar component. The class name that actually shows up is named "MTableToolbar-actions-36" so I actually want to change an action section the MTableToolbar. The components looks like this (and MTableToolbar it's the icons section):
I don't want to create a css rule for "MTableToolbar-actions-36" as there might be a way to do this without a css rule.
I know we can edit the theme of material UI but I was thinking on making it dynamic, where in we can have SASS Variables set, and it will automatically update the Material UI theme.
I use sass to design my page, and here's the sample of variables I use:
$primary-color: #1E79C7;
$secondary-color: #E5681A;
Currrently for me I do the following for the material ui button, because i want my design to be on one place as much as possible
.app-button-blue {
background-color: $primary-color !important;
margin: 5px;
}
.app-button-gray {
background: transparent !important;
box-shadow: none !important;
}
.app-button-white {
background: transparent !important;
box-shadow: none !important;
border: $primary-color solid 1px !important;
}
Is there a way for me to use this SASS variables on overwriting the theme of material ui - like setting the primary and secondary colors?
Material UI uses a javascript based style solution (JSS) instead of a CSS pre-processor like SCSS (see style solution).
This means its not possible to customize the Material UI theme via SCSS variables. Nor is it possible to access the theme in your CSS/SCSS styles.
If you want to use SCSS for styling/theming, you might consider Material Web Components instead.
It is possible to populate the MaterialUI theme from Sass/Scss variables using Webpack wizadry
palette.scss
$primary: #1E79C7;
$secondary: #E5681A;
:export {
primary: $primary;
secondary: $secondary;
}
theme.js
import { createMuiTheme } from '#material-ui/core/styles'
import palette from './palette.scss'
export const theme = createMuiTheme({
palette: {
primary: {
main: palette.primary,
},
secondary: {
main: palette.secondary,
},
}
})
App.js
import React from 'react'
import { ThemeProvider } from '#material-ui/core/styles'
import { theme } from './theme'
export const App = () => {
return (
<ThemeProvider theme={theme}>
// App
</ThemeProvider>
)
}
This means you can use Sass to style and color both your non Material UI and Material UI components from one source of truth
To style other components, just use Sass imports
#import './palette.scss'
.app-button-blue {
background-color: $primary; // removed !important cos there's usually a better way
margin: 5px;
}
An example on this GitHub issue suggests how you can do this.
import React from 'react';
import { withStyles } from '#material-ui/core';
const cssVariables = (theme) => ({
'#global': {
':root': {
'--color-primary': theme.palette.primary.main,
'--color-secondary': theme.palette.secondary.main,
}
}
});
const RootComponent = () => {
return <div>Whatever...</div>
}
export default withStyles(cssVariables, RootComponent);
Having in mind RootComponent initialises inside ThemeProvider.
There's a way to define the theme variables in the JS-side and use them in the CSS-side to keep a single source of truth and allow dynamic theme switching. You can check the solution I posted on the MUI GitHub repository.
It may not be exactly what you wanted to achieve, but the following article explains how you can export SASS variables. https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript
Afterwards you can import these in JS and use them to set up your theme.
Initialize your variables in the <body> tag styles.
body {
--my-var: #fff;
}
Then it will be visible for Material UI Drawers and other components, that opening with portals.
UPD 2:
There is another way to do the thing above dynamically. So, if you want to use CSS Variables to change Material UI components styles, for example - for Drawer (that uses React-Portals to lift up a component to top level of the DOM). The problem was that by MUI lifted up components were out of the 'root' div and CSS Variables could not reach these components.
Solution:
const [theme, setTheme] = useState('light');
useEffect(() => {
document.body.classList.remove('dark', 'light');
document.body.classList.add(theme);
}, [theme]);
and add variables to these classNames in some file.
File theme.scss:
.light {
--theme-color: #A80000;
--theme-page-background: #FFF;
$theme-page-background: #FFF;
--theme-page-text: $color-text;
}
.dark {
--theme-color: #0000A8;
--theme-page-background: #111;
$theme-page-background: #111;
--theme-page-text: #FFF;
}
Import your theme.scss file to the project and it have to work.
I'm trying to create a custom style for material textField and need a JSS selector that reaches a nondeterministic classname.
Style would look something like this:
const styles = {
'#media (min-width: 768px)': {
borderLabel: {
top: 2,
'&.MuiInputLabel-shrink':{
top: -2,
}
}
}
The issue is MuiInputLabel-shrink is also generated by jss and has a xxx number suffix. Is there any selector that work on generated classes?
Material-ui have a built in API where you can override mostly of the styling.
Assuming you are using material-ui in react, you can override shrink in the classes property in InputLabel component.
<InputLabel
classes={{
shrink: classes.shrinkStyle
}}
/>
Read the documentation to find the right component to override. There is also attached code to help you on the way. https://codesandbox.io/embed/l32qn5p18q
Link to similar problem in GitHub: https://github.com/mui-org/material-ui/issues/10468
Now then back to style through JSS
There is some possibilites to style with JSS through nesting. I've not researched huge lot on this, but I know that you can use nested JSS. Example:
const styles = {
'#media (min-width: 768px)': {
borderLabel: {
//styling
'&>div':{
//styling
}
'&>div>div>td':{
'& svg':{
//styling
}
}
}
}
}
You should also read JSS documentation
I wanna custom the floating Label of TextField.
I know creating a new one works like below, but is there a better way?
import TextFiled from 'material-ui/TextField';
class TextFiledNew extends Component {
static propTypes = {
}
render () {
return (
<TextFiled
floatingLabelFixed={true}
floatingLabelStyle = {{top: '88px', textTransform: 'uppercase', letterSpacing: '0.1em'}}
/>
)
}
}
module.exports = TextFiledNew
I tried the changing Theme way, but it doesn't work.
const muiTheme = getMuiTheme({
textField: {
floatingLabel:{
top: '88px',
textTransform: 'uppercase',
letterSpacing: '0.1'
}
}
});
That works just fine! We use several components with a custom wrapper around them from material-ui. Our EnhancedMenuItem lets us add some optional icons and transitions in some circumstances. Definitely experiment with the library and make your own modifications to get it exactly right for your needs.