I'm trying to implement a MaterialUI theme throughout my app. So far I have this and everything but the transition property is working correctly. Chrome DevTools show the property active but there is no background transition on hover. Clearly I'm not looking in the right places as I can't find this topic discussed anywhere.
import { createMuiTheme } from '#material-ui/core/styles';
import blueGrey from '#material-ui/core/colors/blueGrey';
const primaryStop0 = blueGrey[500]
const primaryStop1 = blueGrey[900]
export const theme = createMuiTheme({
overrides: {
MuiButton: {
root: {
fontWeight: 'bold',
margin: '50px'
},
containedPrimary: {
background: `linear-gradient(to right,${primaryStop0},${primaryStop1})`,
transition: 'background 0.2s ease',
'&:hover': {
background: `linear-gradient(to left,${primaryStop0},${primaryStop1})`
}
}
}
}
})
As it turns out this is a CSS limitation not MaterialUI. No support for linear-gradient transitions.
Use CSS3 transitions with gradient backgrounds
Related
I am trying to change the header text color on pages in Backstage (Spotify's open source software catalog). I have tried using themes as advised in Backstage documentation, but there is no way to specifically override the header text color (I can change the background colour, but not the color of the text.
I have tried a few solutions - this changes the background color of the header to white but the text remains white (default color) and actual header text cannot be read (white text on white background):
genPageTheme({colors: ['#ffffff', '#ffffff'], shape: shapes.wave})
I then found the ability to add a fontColor to the genPageTheme function and tried the following, but again it did not change the header color - I am not sure if I am calling it incorrectly:
genPageTheme({colors: ['#ffffff', '#ffffff'], shape: shapes.wave, options: {fontColor: '#B1D8FF'} }),
I also took a look at customizing the overall theme but found there is no field that allows the header to be modified (neither background nor text):
const myTheme = createTheme({
palette: {
...lightTheme.palette,
primary: {
main: '#2670A9',
},
:
:
I figure there is a way to do this using material-ui (MUI) directly since Backstage uses MUI but I would like to stay true to the Backstage customization approach of using their themes.
Any ideas how the header text color can be changed? Any ideas would be helpful!
You need to use BackstageOverrides. This will allow you to override default Backstage settings.
This will allow you to customize (a lot) your application.
A simple example:
import { BackstageOverrides } from '#backstage/core-components';
import { BackstageTheme } from '#backstage/theme';
export const customThemeOverrides = (
theme: BackstageTheme,
): BackstageOverrides => {
return {
BackstagePage: {
root: {
display: 'grid',
overflow: 'hidden !important',
gridTemplateColums: '30px 280px 3fr 30px',
gridTemplateAreas:
'"header header header header" ". sidenav content ." ". sidenav content . "',
},
},
BackstageHeader: {
header: {
height: '80px',
gridArea: 'header',
display: 'flex',
borderBottom: `1px solid #FFFFFF`,
backgroundImage: `none`,
backgroundPosition: 'center',
padding: '50px',
boxShadow: 'none',
background: `#FFFFFF`
},
rigthItemsBox: {
color: '#FFFFFF',
},
title: {
color: `#FFFFFF`,
fontSize: 24,
},
subtitle: {
color: `#666666`,
},
type: {
color: `#FFFFFF`,
},
},
BackstageHeaderLabel: {
label: {
color: '#FFFFFF',
},
root: { color: '#FFFFFF', },
value: { color: '#FFFFFF' },
},
};
};
Currently, the existing codebase has some overrides in the createTheme i.e. :
return createTheme({
...
overrides: {
MuiChip: {
deletable: {
"&:focus": {
backgroundColor: grey[200],
"& $deleteIcon": {
color: primary.dark,
transition: transitions.create(["color"]),
},
"& $deleteIcon:hover": {
color: darken(primary.dark, 0.2),
transition: transitions.create(["color"]),
},
},
}
}
}
})
The transition library was moved away from import transitions from "#material-ui/core/styles/transitions";. I can't find the new import that properly matches or the documentation. There is documentation that speaks to using theme.transition.create but i'm not clear how that's meant to be used inside of the createTheme method. Is there documentation or a new way to access that method within the the createTheme?
Basically, I can change the colors of all Button elements in my theme, but I've been unable to do the same for AppBar. I'm puzzled. Here's a snippet of my code:
overrides: {
MuiButton: {
root: {
background: 'blue',
},
label: {
color: 'white',
}
},
MuiAppBar: {
root: {
background: 'white'
}
},
I've tried a lot of different variations on that, but nothing works. Please advise!
The problem you are seeing is due to the color prop in AppBar overriding your custom styling. By default, your .MuiAppBar-root class styling is being applied as expected, but the .MuiAppBar-colorPrimary class is setting the background-color to the default theme primary color. This differs from MuiButton which has the color prop set to "default" if you don't explicitly set it. If you change this to 'inherit' or 'default', the custom color should work for you.
export default function CustomAppBar() {
const theme = createMuiTheme({
overrides: {
MuiAppBar: {
root: {
background: "white"
}
}
}
});
return (
<ThemeProvider theme={theme}>
<AppBar color="default">
...
</AppBar>
</ThemeProvider>
);
}
Resources:
https://material-ui.com/api/button/
https://material-ui.com/api/app-bar/
I have been searching the web for a while, but I could not understand how to apply the default dark theme that is shown in the site of Material-ui, where you can toggle between the light and dark theme.
They say those are default ones, but how do I use them?
Thanks!
You can use them by creating a Theme like this:
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
const THEME = createMuiTheme({
palette: {
type: 'dark',
},
});
class YourComponent extends Component {
render() {
return (
<MuiThemeProvider theme={THEME}>
... your other components
</MuiThemeProvider>
)
}
}
export default YourComponent;
The toggle can be done with a button like this example.
I'm trying to set the z-index of components on a custom theme in Material-UI. They have moved the zIndex out of the base theme in the in version 0.14.2 and instead zIndex is set in a node module called zIndex.js. I would like to override the zIndex in my component but can't find a way to do this without changing the node module itself which is a bad idea. I have a custom theme set up in a separate page like so
import Colors from 'material-ui/lib/styles/colors';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import Spacing from 'material-ui/lib/styles/spacing';
import zIndex from 'material-ui/lib/styles/zIndex';
export default {
spacing: Spacing,
zIndex: zIndex,
fontFamily: 'Roboto, sans-serif',
palette: {
primary1Color: "#303F9F",
primary2Color: "#3F51B5",
primary3Color: "#C5CAE9",
accent1Color: "#448AFF",
accent2Color: "#ED2B2B",
accent3Color: "#F58C8C",
textColor: Colors.darkBlack,
alternateTextColor: Colors.white,
canvasColor: Colors.white,
borderColor: Colors.grey300,
disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
pickerHeaderColor: Colors.cyan500
}
};
I then use that in app.jsx like so (code shortened for brevity)
import ThemeManager from 'material-ui/lib/styles/theme-manager';
import MyRawTheme from '../theme/customTheme.js';
class App extends React.Component {
constructor() {
this.state = {
appConfig: MainStore.appConfig
}
}
getChildContext() {
return {
muiTheme: ThemeManager.getMuiTheme(MyRawTheme)
};
}
App.childContextTypes = {
muiTheme: React.PropTypes.object
};
While this works fine for setting custom colors, I'm unsure of how to set a custom zIndex.
I have tried creating my own zIndex.js and importing that like so
import Colors from 'material-ui/lib/styles/colors';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import Spacing from 'material-ui/lib/styles/spacing';
import zIndex from './zIndex';
export default {
spacing: Spacing,
zIndex: zIndex,
fontFamily: 'Roboto, sans-serif',
palette: {
primary1Color: "#303F9F",
primary2Color: "#3F51B5",
primary3Color: "#C5CAE9",
accent1Color: "#448AFF",
accent2Color: "#ED2B2B",
accent3Color: "#F58C8C",
textColor: Colors.darkBlack,
alternateTextColor: Colors.white,
canvasColor: Colors.white,
borderColor: Colors.grey300,
disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
pickerHeaderColor: Colors.cyan500,
}
};
As well as just including it as an object like so
import Colors from 'material-ui/lib/styles/colors';
import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
import Spacing from 'material-ui/lib/styles/spacing';
export default {
spacing: Spacing,
zIndex: {
menu: 1000,
appBar: 1100,
leftNavOverlay: 1200,
leftNav: 1300,
dialogOverlay: 1400,
dialog: 1500,
layer: 2000,
popover: 5000,
snackbar: 2900,
tooltip: 3000
},
fontFamily: 'Roboto, sans-serif',
palette: {
primary1Color: "#303F9F",
primary2Color: "#3F51B5",
primary3Color: "#C5CAE9",
accent1Color: "#448AFF",
accent2Color: "#ED2B2B",
accent3Color: "#F58C8C",
textColor: Colors.darkBlack,
alternateTextColor: Colors.white,
canvasColor: Colors.white,
borderColor: Colors.grey300,
disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3),
pickerHeaderColor: Colors.cyan500,
}
};
Neither of which works. It always uses the zIndex values from the node module, even if it's not imported in the custom theme page.
I've asked on the material-ui repo and was directed to this page which didn't help me http://www.material-ui.com/#/get-started/server-rendering
Anybody have an idea how I can change the zIndex without changing the node module itself?
(SOLUTION): After battling this all day yesterday and finally posting here, I figured out how to override the zIndex for components in a custom theme. Hope this helps someone else. You can include a second parameter in the getMuiTheme method when customizing your theme. This isn't mentioned in the Material-UI docs anywhere. In app.jsx or whatever component you want to override the zIndex in, you can change it like this (code shortened for brevity)
import ThemeManager from 'material-ui/lib/styles/theme-manager';
import MyRawTheme from '../theme/customTheme.js';
let zIndex = {
zIndex: {
popover: 5001,
layer: 5000
}
};
class App extends React.Component {
constructor() {
this.state = {
appConfig: MainStore.appConfig
}
}
getChildContext() {
return {
muiTheme: ThemeManager.getMuiTheme(MyRawTheme, zIndex)
};
}
I am making the change in my main app.jsx component because I want these changes to take effect in all of my other components but I believe you can make these changes at individual component level as well without applying them to all of your components. If you look in the material-ui node modules under lib/styles/zIndex.js you will find a list of component zIndex's that can be changed this way. it looks like this
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = {
menu: 1000,
appBar: 1100,
leftNavOverlay: 1200,
leftNav: 1300,
dialogOverlay: 1400,
dialog: 1500,
layer: 2000,
popover: 2100,
snackbar: 2900,
tooltip: 3000
};
module.exports = exports['default'];
So as you can see from my example, I'm simply changing the popover and layer zIndex in my app.jsx component.