As stated in the doc, the color property accepts enums of "default", "inherit", "primary", "secondary". I want an arbitrary color other than "primary" and "secondary". A possible solution is by utilizing the "Overriding with classes" feature where I can specify the root background, and it works.
const styles = {
root: {
backgroundColor: "rgba(44, 152, 240)",
}
};
function FloatingActionButtons(props) {
const { classes } = props;
return (
<Button
variant="fab"
classes={{ root: classes.root }}
>
<Icon style={{ fontSize: 34 }}>play_arrow</Icon>
</Button>
);
}
However, when the mouse hangs over the button, the background restores to the default light grey. This behavior is different when I specify the color property to "primary", in which case the background dims a bit when the mouse hangs over.
How should I specify the customized color correctly?
Use hover selector
const styles = {
root: {
backgroundColor: "rgba(44, 152, 240)",
'&:hover':{
backgroundColor:"rgba(44, 152, 240)",
},
}
};
Have a look at Customized Buttons for more details.
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' },
},
};
};
How to change/customize the default color of selected rows in a Material-UI table (of type Sorting & Selecting)? By default it is secondary (red) color (Codesandbox here: https://codesandbox.io/s/3sjxh). How to change it to a custom color, or at least to primary (blue), as it appears in the new beta version (https://next.material-ui.com/components/tables/#main-content) (v5).
You have to pass your styles to the classes props in order to change the styles for the TableRow.
To achieve the background-color change you want to override the default classes: .MuiTableRow-root.Mui-selected and .MuiTableRow-root.Mui-selected:hover.
To override them you have to use a parent reference with a so called $ruleName in your makeStyles hook. Here is a very good explanation from #Ryan Cogswell if you are more interested how it works.
This would then look like this:
const useStyles = makeStyles((theme) => ({
// your other styles
...,
tableRowRoot: {
"&$tableRowSelected, &$tableRowSelected:hover": {
backgroundColor: theme.palette.primary.main
}
},
tableRowSelected: {
backgroundColor: theme.palette.primary.main
}
}));
...
<TableRow
// your other props
...
classes={{
root: classes.tableRowRoot,
selected: classes. tableRowSelected,
}}
>
...
</TableRow>;
For the checkboxes, you only have to add the color prop in order to change it:
<Checkbox
// other props
...
color="primary"
/>
and for your Toolbar, you only need to change the provided highlight class inside your useToolbarStyles in order to get things working:
import { alpha } from "#material-ui/core/styles";
...
const useToolbarStyles = makeStyles((theme) => ({
...,
highlight:
theme.palette.type === "light"
? {
color: theme.palette.primary.main,
backgroundColor: alpha(
theme.palette.primary.light,
theme.palette.action.selectedOpacity
)
}
: {
color: theme.palette.text.primary,
backgroundColor: theme.palette.primary.dark
},
}));
Live demo:
I'm using Panel from 'office-ui-fabric-react/lib/Panel' in React.
This Panel generates a little [x] button on the upper right hand corner. It is very hard to see, is there any way to change its default background color to red & modify its mouse hover value?
You can easily change the button style through styles property of Panel Component:
styles={{
closeButton: {
backgroundColor: '#f00',
},
}}
If you want to change the hover style of button, you have to use selectors property:
styles={{
closeButton: {
backgroundColor: '#f00',
selectors: {
':hover': {
backgroundColor: '#000'
},
},
},
}}
Panel Component:
<Panel
styles={{
closeButton: {
backgroundColor: '#f00',
selectors: {
':hover': {
backgroundColor: '#000'
},
},
},
}}
/>
Working Codepen example
Useful links:
Definition of Panel Component styles
And this one is the most important Component Styling
Is it possible to override the default style of a particular Material UI component style? Let's say I want have different types of MuiButton's...
<Button color="primary" variant="contained">Foo</Button>
<Button variant="text">Foo</Button>
With the default styles the first button will have a white text color and the second one will have a black text color. If I would like to change the text color default globally (which in this case I won't) I should use the following options for createMuiTheme:
const options = {
overrides: {
MuiButton: {
root: {
color: 'white',
}
}
}
};
However in this case I would only like to change the text color of the primary colored and contained variant button. How do I do this?
From the documentation it was not very clear to me but apparently you can target different classes in the component like so:
const options = {
overrides: {
MuiButton: {
containedPrimary: {
'& > .MuiButton-label': {
color: 'white'
},
}
}
}
};
If I adjust the size of a button in the theme, like this:
const theme = createMuiTheme({
overrides: {
MuiButton: {
fab: {
width: 36,
height: 36,
},
},
MuiSvgIcon: {
root: {
width: 16,
},
},
},
};
Then the button and the icon appear at the size I want. However this affects all icons, whether they're inside a button or not!
How can I say that I only want the MuiSvgIcon properties to apply when the element is found inside a MuiButton element?
Well I've worked out one way to do it, but it's not ideal because it relies on the internal structure of the MuiSvgIcon. But it might serve as a starting point for someone else. Better answers are most welcome.
const theme = createMuiTheme({
overrides: {
MuiButton: {
fab: {
width: 36,
height: 36,
'& svg': {
width: 16,
},
},
},
},
};
It works by applying a style to the <svg> DOM element inside the JSX <Button variant="fab"> element.
It's not documented anywhere unfortunately, but you can use any sort of CSS selectors to help. Use the "attribute contains" pattern with the class attribute itself to target descendants:
const theme = createMuiTheme({
overrides: {
MuiButton: {
root: {
// Targets MuiSvgIcon elements that appear as descendants of MuiButton
'& [class*="MuiSvgIcon-root"]': {
width: 16
}
},
},
},
};
Note 1: Caution! Material UI minifies these classnames in prod builds by default. If you want to preserve these classnames for prod, you will need to tweak the class generator function: https://material-ui.com/customization/css-in-js/ (see dangerouslyUseGlobalCSS)
Note 2: with this pattern, occasionally you end having to use !important if there's already a competing inline style that you want to override. If you're using styled-components, you can increase the specificity by using && (see the Material UI docs).