This question already has answers here:
Add custom theme variable in createTheme()
(3 answers)
Closed 2 years ago.
Is it possible add custom objects to the "createMuiTheme"?
Lets say I have a cart icon in the AppBar, can I some how inject this so that it is available in the "createMuiTheme"?
Something like this:
const theme = createMuiTheme({
custom: {
CartIcon: {
color: "#333"
}
}
});
yes. a custom object can be added in MUI theme object.
You've added the custom CartIcon color in the object, now you can access that object inside the makeStyles in this way:-
const useStyles = makeStyles((theme) => ({
cartClass:{
color:theme.custom.CartIcon.color;
}
}));
Related
Having two appBars components in the same page is a good approach (one as header and the other one as footer)? Besides, I am using the MUI createTheme to override some styles. I am doing this to override the appBar component.
components: { ...
MuiAppBar: {
styleOverrides: {
root: {
minHeight: '4.375rem',
backgroundColor: appColors.aqua600,
},
},
}, ...
This works fine, but as was wondering how could I override the style of an AppBar that is renders as 'header' and style the other appBar that is rendered as 'footer'
The component usage:
<AppBar
component="header | footer" ...
</AppBar>
I know that can be easily done with CSS, but I was wondering if this can be done using the createTheme from MUI?
It can be done by overriding styles based on props using ownerState.
Overrides based on props
You can pass a callback as a value in each slot of the component's styleOverrides to apply styles based on props.
The ownerState prop is a combination of public props that you pass to the component + internal state of the component.
You can check more on docs.
So, the custom theme for MuiAppBar should be something like this:
components: {
MuiAppBar: {
styleOverrides: {
root: ({ ownerState }) => {
return {
...(ownerState.component === "header" && {
backgroundColor: "#202020"
})
};
}
}
}
}
I want to disable the ripple effect since I don't want the effect when clicking on elements. Now this works but when doing this the :focus-visible state will also be disabled which is a bummer. Would be really nice to split this prop up into something like disableClickRipple, disableFocusRipple and so on...
Anyway, according to the docs I have to add focusVisibleClassName in order to style my own focus state but how would I do this to all elements that is affected by the disabled ripple effect? As I understand it I have to do this manually on each and every component? Can this be done globally? To me this would need to be a global setting?
I don't know if this is how MUI intended it to be, but this works:
import { createMuiTheme } from '#material-ui/core/styles';
const theme = createMuiTheme({
props: {
MuiButtonBase: {
// Disable ripple globally.
disableRipple: true,
// The class will be added (as is, ie `focus-visible`)
// To the ButtonBase root whenever the button gets focus via keyboard.
focusVisibleClassName: 'focus-visible',
},
},
overrides: {
MuiButtonBase: {
// And this is how we select it.
root: {
'&.focus-visible': {
backgroundColor: 'rgba(0, 0, 0, 0.12)', // theme.pallate.action.focus
},
},
},
},
});
export default theme;
PS. Spent an hour trying to solve this to no avail. Then I landed your question and "in order to style my own focus state" gave me the idea above.
I am using const in my material-UI theme in order to define colors
for example
const tableHeader=grey[400]
in order to use semantic constant names I want to create several constants and give them the same color
for example somthing like
const tableHeader, borderDefault = grey[400]
is there any such way
(the eaxmple above don't work)
apart from Maryja Piaredryj answer, there's another way. Store these colors in the material-UI theme, and then use this using makeStyles or useTheme.
const theme = createMuiTheme({
custom: {
palette: {
borders: grey[400]
}
}
});
Now use this in makeStyles as a regular theme property
const useStyles = makeStyles((theme) => ({
borderStyle:{
borderColor:theme.custom.palette.borders;
}
}));
Unfortunately, you should assign value to every variable separately.
But you can think of choosing another data structure to store color variables, smth like
const THEME = {
borders: grey[400]
}
const tableHeader = THEME.borders;
const borderDefault = THEME.borders;
I have an autocomplete component at the bottom of the Create view with TabbedForm.
Dropdown list is getting hidden as overflow of parent Card component is set to hidden.
Is there a way to pass a style property to a parent Card component to override default material-ui overflow property?
If no, is there any hack that I can use to achieve this at a render time?
Try this:
import { withStyles } from '#material-ui/core/styles'
const cardCreateStyles = {
card: {
overflow: 'scroll',
backgroundColor: 'Lavender',
}
}
const CardCreate = withStyles(cardCreateStyles)(({ classes, ...props }) => (
<Create classes={classes} {...props} >
...
</Create>
))
Simply need to use withStyles some how to edit the default color from the primary/error color to simply just use black. But since the update from 0.19.0 to beta 1 this doesn't seem possible now.
The error message (the one under the text input) is using the object under theme.palette.error (see source) to choose which color to use.
That same palette color is used for the text field label too.
If you want to change both at the same time the right approach would be to use a custom theme that rewrites the theme.palette.error to something else.
import { createMuiTheme, createPalette } from 'material-ui/styles';
import grey from 'material-ui/colors/grey';
const theme = createMuiTheme({
palette: createPalette({
error: grey
})
});
If you want to change just the FormHelperText color then you could customize it in theme by using the overrides parameter.
const theme = createMuiTheme({
overrides: {
MuiFormHelperText: {
error: {
color: 'black'
}
}
}
});
To change the Label of the TextField in the current version (v1.2.1)
You have to set the the color like this:
const theme = createMuiTheme({
palette: {
text: {
secundary: 'black'
}
}
}
});
for error the path is palette.error.main
the easiest way to find the right variables is to look directly into the code