I want to tweak CSS shadows for particular elevation levels.
In theming guide there is shadows array property of theme object which holds style sets for all 24 elevation levels. But if I want to change any of them, as I understand, I have to provide full array of 24 elements. It would be great to somehow avoid using complete set of shadows and use only custom properties:
e.g. custom shadow for elevation = 24
theme = {
shadows: {
24: '10px 10px rgba(0,0,0,0.2)'
}
}
But the problem is even when I copy-paste shadows array from Material-UI and replace some values there it doesn't affect elevation decoration of components. They still use default values from the library.
Am I doing something wrong? Or is there any way to change default shadows for different elevation values?
| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.11 |
| React | 15.6.1 |
| browser | all |
You can always tweak the theme object after calling createMuiTheme(). Please provide a reproduction case if this doesn't work.
I'm trying to create red shadow beneath AppBar
const theme = createMuiTheme({
shadows: [
// 23 default values of 'shadows' array from https://material-ui-1dab0.firebaseapp.com/customization/themes/
'0px 11px 15px -7px red,0px 24px 38px 3px red,0px 9px 46px 8px red', // 24th value
],
});
<MuiThemeProvider theme={theme}>
<AppBar elevation={24}>
// content
</AppBar>
</MuiThemeProvider>
But shadow style remains the same as it is by default.
I have just tried, the following work as expected:
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import Paper from 'material-ui/Paper';
const theme = createMuiTheme();
theme.shadows[24] = theme.shadows[4];
function Shadows() {
return (
<MuiThemeProvider theme={theme}>
<Paper elevation={24}>24</Paper>
</MuiThemeProvider>
);
}
export default Shadows;
Most helpful comment
I have just tried, the following work as expected: