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
Related
I am having trouble styling the Menu component in Material-UI v5.
I have this UI:
<Menu
defaultValue={undefined}
id="simple-menu"
open={openMenu}
onClose={onCloseHandler}
anchorEl={anchorEl}
MenuListProps={{ onMouseLeave: onCloseHandler }}
elevation={0}
sx={{ color: "white", backgroundColor: "blue" }}
>
When I use this code all the UI gets blue:
After that I try to apply global style overrides to the paper of the menu, but nothing happened. The styles did not change:
components: {
MuiMenu: {
styleOverrides: {
paper: {
backgroundColor: arcBlue,
color: arcBlue,
borderRadius: "0px",
},
},
}
}
Please some help here
Passing sx directly on the Menu component applies the styles to the component's root (which is what's causing your style modifications to apply to the overlay blanket).
In your case, since you're attempting to only style the MUI list portion of the menu, you want to pass the sx prop directly to the underlying list component, using the MenuListProps prop. For example:
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
sx: { backgroundColor: "blue" }
}}
>
Which produces:
Working CodeSandbox: https://codesandbox.io/s/twilight-glitter-cj83rc?file=/demo.tsx:758-951
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:
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'
},
}
}
}
};
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.