i wan to increase the with of a drop-down list "Birth Place" inside the Materialtable in reactjs
i want some thing like that and i dont know where can add this css code width: 60%; for this drop downlist
You can style those elements with the createMuiTheme of the material-ui lib:
const theme = createMuiTheme({
overrides: {
MuiTableRow: {
root: {
"&[mode=add]": {
"& .MuiInputBase-root": {
width: "90%",
background: '#dedede',
}
}
}
}
}
});
The problem starts when you need to style specific input in specific cell, because you can't control style/props of that element.
The solution is pretty ugly, but I couldn't find a better one (at least for version 1.57.2):
const theme = createMuiTheme({
overrides: {
MuiTableRow: {
root: {
"&[mode=add]": {
"& .MuiInputBase-root": {
width: "90%",
background: "#a1a1a1"
},
"& .MuiTableCell-body:nth-child(4)": {
"& .MuiInputBase-root": {
width: "100%",
background: "#d1d1d1"
}
}
}
}
}
}
});
You can find the complete working example here: https://codesandbox.io/s/material-table-style-create-row-cbpzk?file=/demo.js
Related
I'm creating a style to use within a Button, but I'm unsure on how to select a nested style from my theme. Here is my style and theme:
const buttonStyle: SxProps<Theme> = {
'&:hover': {
backgroundColor: 'backgroundAlert', // workaround
},
};
export const darkTheme = createTheme(themeOptions, {
palette: {
mode: 'dark',
background: {
default: '#0B0E16',
paper: '#1D1F2B',
alert: '#373B38' // I want to use this property
},
backgroundAlert: '#373B38', // workaround
},
});
I'm using backgroundAlert as a work around because i don't know how to select alert from background.alert since it's nested. I couldnt find anything in the docs - does anyone know the syntax to do this?
Something like the below worked for me.
import { styled } from '#mui/material/styles';
const ButtonStyle = styled(Button)(({ theme }) => ({
'&:hover': {
backgroundColor: darkTheme.palette.background.alert,
},
}));
<ButtonStyle variant="contained">Your Button</ButtonStyle>
I need to use Switch component from MUI v5 in a website with third party CSS that apply relative position to checkboxes and radios.
In v4 I was able to change this behaviour with an override:
overrides: {
MuiSwitch: {
input: { position: 'absolute !important' },
}
}
This was enough to set position to absolute.
Following the example provided by official documentation in order to migrate to v5 I changed the above snippet in:
components:{
MuiSwitch: {
styleOverrides: {
input: {
position: "absolute !important"
}
}
}
}
But MuiSwitch-input still has position relative.
Please take a look at this demo.
The only solution I found was to put style in CSS:
.MuiSwitch-input {
position: absolute !important;
}
I'm not sure why your code didn't work, but I've found a workaround by specifying the switch input className directly like this:
import Switch, { switchClasses } from "#mui/material/Switch";
import { createTheme, ThemeProvider } from "#mui/material/styles";
const theme = createTheme({
components: {
MuiSwitch: {
styleOverrides: {
root: {
[`& .${switchClasses.input}`]: {
position: "absolute"
}
},
switchBase: {
color: "red"
}
}
}
}
});
Live Demo
I'm creating a theme for an app with createMuiTheme. I'm using material-table and I need to target to this icon of the column table header that is currently sorted:
Watching in developer tools it has the following CSS selectors:
.MuiTableSortLabel-root.MuiTableSortLabel-active.MuiTableSortLabel-root.MuiTableSortLabel-active .MuiTableSortLabel-icon {
color: rgba(0, 0, 0, 0.54);
opacity: 1;
}
How can i do that in the createMuiTheme object from this?
const theme = createMuiTheme({
overrides : {
MuiTableSortLabel: {
root: {
//i want to modify the icon color
color: blue
}
}
}
})
When you are uncertain how to override the default styles, the best resource is to look at how the default styles are defined. The browser developer tools will show you the end result, and the source code will show you the approach to use to generate CSS with similar specificity.
Below is the relevant code from TableSortLabel that controls the icon color:
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
'&$active': {
// && instead of & is a workaround for https://github.com/cssinjs/jss/issues/1045
'&& $icon': {
opacity: 1,
color: theme.palette.text.secondary,
},
},
}
});
You can use very similar syntax for the theme override:
const theme = createMuiTheme({
overrides: {
MuiTableSortLabel: {
root: {
"&$active": {
"&& $icon": {
color: "blue"
}
}
}
}
}
});
Relevant JSS Documentation: https://cssinjs.org/jss-plugin-nested/?v=v10.0.3#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet
I'm currently customizing a few components using global theme overrides in the hopes of maintaining as much of the integrity of the Material-UI theming engine as possible. I know I could accomplish what I'm trying to do using composition, but I want to see if it's possible to achieve this via overrides.
The Goal
Change the background color of the BottomNavigation component to use the primary color of the current theme, and ensure the label gets a color that is legible on top of that background color.
My Current Approach
const theme = createMuiTheme({
palette: {
primary: {
main: 'rgba(217,102,102,1)'
}
},
overrides: {
MuiBottomNavigation: {
root: {
backgroundColor: 'rgba(217,102,102,1)'
}
},
MuiBottomNavigationAction: {
wrapper: {
color: '#fff'
}
}
}
});
This code accomplishes the task and turns the bottom navigation red and the label/icons white. However, I want the flexibility of being able to change the primary color in the palette and have the component update accordingly.
What I'm Trying To Do
const theme = createMuiTheme({
palette: {
primary: {
main: 'rgba(217,102,102,1)'
}
},
overrides: {
MuiBottomNavigation: {
root: {
backgroundColor: 'primary.main'
}
},
MuiBottomNavigationAction: {
wrapper: {
color: 'primary.contrastText'
}
}
}
});
In this way I could easily update the primary color and not have to worry about changing every reference to it across my overrides. I realize I could extract the rgba value out into a const and that would accomplish part of my goal, but I don't see how I could access something as useful as contrastText in case I choose a much lighter primary color.
So - does anyone know of a way to reference theme palette colors in a theme override definition? Any help would be greatly appreciated!
There's another approach here. createMuiTheme accepts any number of additional theme objects to be merged together.
With that in mind you could replicate your accepted answer without having two different ThemeProvider. And if you move the theme definition to its own module, it won't be recreated on each render.
import { createMuiTheme } from "#material-ui/core/styles";
const globalTheme = createMuiTheme({
palette: {
primary: {
main: "rgba(217,255,102,1)"
}
}
});
const theme = createMuiTheme(
{
overrides: {
MuiButton: {
root: {
backgroundColor: globalTheme.palette.primary.main
},
label: {
color: globalTheme.palette.primary.contrastText
}
}
}
},
globalTheme
);
export default theme;
I updated the CodeSandBox to reflect this.
Ill provide two solutions- one is more readable and maintainable, and one has better performance.
The readable and maintainable approach:
Create nested themes.
One theme will be for defining the palette, and one theme will be for overrides.
Because its two themes, you can access the palette theme from overrides theme:
const globalTheme = createMuiTheme({
palette: {
primary: {
main: 'rgba(217,255,102,1)'
}
},
});
const overridesTheme = createMuiTheme({
overrides: {
MuiButton: {
root: {
backgroundColor: globalTheme.palette.primary.main,
},
label: {
color:globalTheme.palette.primary.contrastText,
}
},
}
})
You can refer to this CodeSandbox
This approach doesn't have good performance, bacause every render a new CSS object will be computed and injected
The better performance approach:
First you create an Mui theme skeleton, with the palette.
After it has been created, you add the styles that rely on the palette (notice how I have to use the spread operator a lot to avoid deleting styles):
const theme = createMuiTheme({
palette: {
primary: {
main: 'rgba(217,255,102,1)'
}
},
})
theme.overrides = {
...theme.overrides,
MuiButton: {
...theme.MuiButton,
root: {
...theme.root,
backgroundColor: theme.palette.primary.main,
},
label: {
...theme.label,
color:theme.palette.primary.contrastText,
}
},
}
You can refer to this CodeSandbox
There's a new way to do it in MUI v5 that is much more straightforward. Suppose you want to override the background color of an Mui Button. Inside the custom theme object, you specify this:
const customTheme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
backgroundColor: 'red',
},
},
},
},
});
This is the usual case for hard coding a value. Now, if you wanted to use some property like the primary color from the custom theme you just made, you can pass an arrow function to the root(or whatever component you need to override) with an object as the argument, and return an object containing the styles you need. You can access the theme inside the returned object.
const customTheme = createTheme({
palette: {
primary: {
main: '#002255',
},
},
components: {
MuiButton: {
styleOverrides: {
root: ({ theme }) => ({
backgroundColor: theme.palette.primary.main,
}),
},
},
});
As you can see, inside the object you can destructure the theme. Similarly you can destructure ownerState, which contains all the props and state of the component, which you can access using dot operator.
To illustrate, I have declared a prop called dark on an Mui Button Component
<Button dark={true}>Random Button</Button>
Now I can access this prop in the button, using the object destructuring
const customTheme = createTheme({
palette: {
primary: {
main: '#002255',
},
},
components: {
MuiButton: {
styleOverrides: {
root: ({ ownerState, theme }) => ({
backgroundColor: ownerState.dark
? theme.palette.primary.dark
: theme.palette.primary.light,
}),
},
},
});
For people looking at this for answers on theming and switching between themes.
https://codesandbox.io/s/material-theme-switching-with-pallete-colors-vfdhn
Create two Theme objects and switch between them. Use the same theme property between them so all your overrides can use the same palette to ensure things are not repeated and we use the overrides completely.
import { createMuiTheme } from "#material-ui/core/styles";
let globalTheme = createMuiTheme({
palette: {
primary: {
main: "#fa4616"
}
}
});
export const LightTheme = createMuiTheme(
{
overrides: {
MuiButton: {
root: {
backgroundColor: globalTheme.palette.primary.main
},
label: {
color: globalTheme.palette.primary.contrastText
}
}
}
},
globalTheme
);
globalTheme = createMuiTheme({
palette: {
primary: {
main: "#0067df"
}
}
});
export const DarkTheme = createMuiTheme(
{
overrides: {
MuiButton: {
root: {
backgroundColor: globalTheme.palette.primary.main
},
label: {
color: globalTheme.palette.primary.contrastText
}
}
}
},
globalTheme
);
Referring to this:
https://material-ui.com/demos/steppers/
It is blue by default.
I want it to be material-ui's orange200
I tried the following code (from this stackoverflow answer) but it did not work.
import getMuiTheme from 'material-ui/styles/getMuiTheme'
const muiTheme = getMuiTheme({
stepper: {
iconColor: 'green' // or logic to change color
}
})
<MuiThemeProvider muiTheme={muiTheme}>
<Stepper>
...
</Stepper>
</MuiThemeProvider>
Use Chrome DevTools (or other browsers' dev tools) to find out a class that will give you an information about an element to override.
For example, assuming you found that the class name is
.MuiStepIcon-root-78. The formulae is Mui[component name]-[style rule name]-[UUID], where Mui is a default prefix and 78 is just an id. So, the element's name is MuiStepIcon and a subsequent attribute is root.
Say, you want to change the color. If you do the hierarchy MuiStepIcon -> root -> color, you will change the default color only. To change any other colors, watch out for pseudo classes. For example, using devtools, if the class is .MuiStepIcon-root-78.MuiStepIcon-active-80, then the pseudo class is active, and your code should be MuiStepIcon -> root -> '&$active' -> color. Look at the code below for references.
Look at the docs for more info https://material-ui.com/customization/overrides/#overriding-with-classes
You can also determine available elements to override by referring to createMuiTheme -> overrides, which will take you to overrides.d.ts file. There is an interface that lists all components names, like MuiStepIcon, though it won't give you other information as devtools do.
import React, { Component } from 'react';
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
const muiTheme = createMuiTheme({
overrides: {
MuiStepIcon: {
root: {
color: '#000000', // or 'rgba(0, 0, 0, 1)'
'&$active': {
color: '#000000',
},
'&$completed': {
color: '#000000',
},
},
},
}
});
const otherStyles = theme => ({
root: {
// Whatever needed
},
});
class MyComponent extends Component {
render(){
return (
<MuiThemeProvider theme={muiTheme}>
{
// Your stepper here, should be within MuiThemeProvider
}
</MuiThemeProvider>
);
}
};
export default withStyles(otherStyles, { withTheme: true })(MyComponent);
overrides: {
MuiStepIcon: {
root: {
color: '#000000', // or 'rgba(0, 0, 0, 1)'
'&$active': {
color: '#000000',
},
'&$completed': {
color: '#000000',
},
},
}
did work for me
One way to change the color and styling of icon of stepper material UI is to pass icon prop in StepLabel as:
<StepLabel
icon = <div style={{backgroundColor: 'orange', width:'11px', padding: '2px', textAlign: 'center', height: '11px', fontSize: '10px', borderRadius: '50%'}}>{index}</div>
>{label}</StepLabel>