I want to override the marginTop: 16 property that occurs in this implementation of StepLabel:
label: {
color: theme.palette.text.secondary,
'&$active': {
color: theme.palette.text.primary,
fontWeight: 500,
},
'&$completed': {
color: theme.palette.text.primary,
fontWeight: 500,
},
'&$alternativeLabel': {
textAlign: 'center',
marginTop: 16,
},
'&$error': {
color: theme.palette.error.main,
},
},
So that I get this as the desired outcome:
But I cannot for the life of me figure out how.... here's my implementation:
<StepLabel
classes={{
root: classes.root,
labelContainer: classes.labelContainer,
label: classes.myLabel
}}
>
{this.state.labels[label - 1]}
</StepLabel>
Here's the classes:
const styles = theme => ({
root: {
marginTop: 0,
padding: 0,
"& $alternativeLabel": {
marginTop: 0
}
},
labelContainer: {
backgroundColor: "green",
marginTop: 0,
"& $alternativeLabel": {
marginTop: 0
}
},
myLabel: {
backgroundColor: "red",
marginTop: 0,
"& $alternativeLabel": {
marginTop: 0
}
},
});
The result - the marginTop DOES NOT get overridden. :(
Further information - the property that I want to override:
seems like the way to do it is like this - credit to this answer Material-UI Style Override?
Put an empty alternativeLabel: {} in, so that the property &$alternativeLabel is overridden:
const styles = theme => ({
labelContainer: {
"& $alternativeLabel": {
marginTop: 0
}
},
alternativeLabel: {},
});
and then call it like this in your component:
<StepLabel
classes={{
alternativeLabel: classes.alternativeLabel,
labelContainer: classes.labelContainer
}}
>
Related
I wonder how do I remove the orange box encapsulating the checkbox. I couldn't find a way to remove it? It does appear when my mouse is clicking on that part.
StyledGrid
export const StyledDataGrid = styled(DataGridPro)(({ theme }) => ({
backgroundColor: theme.palette.common.white,
border: 0,
"& .MuiDataGrid-columnHeader, .MuiDataGrid-cell, .MuiDataGrid-cellCheckbox":
{
border: 0,
":focus": {
outline: "none",
},
},
"& .MuiDataGrid-columnHeaders": {
borderTopLeftRadius: "8px",
borderTopRightRadius: "8px",
backgroundColor: "#fbfbfc",
textTransform: "uppercase",
"& .MuiDataGrid-menuIcon": {
display: "none",
},
"& .MuiDataGrid-columnHeaderTitle": {
color: theme.palette.text.secondary,
},
"& .MuiDataGrid-columnHeader--sorted .MuiDataGrid-columnHeaderTitle": {
color: theme.palette.text.primary,
},
},
"& .MuiDataGrid-row, & .MuiDataGrid-cell": {
maxHeight: "initial !important",
minHeight: "initial !important",
},
}));
Component
<StyledDataGrid
columns={supplierColumns}
rows={rows}
loading={rows.length === 0}
disableSelectionOnClick
checkboxSelection
onSelectionModelChange={(ids) => setSelectedRowIds(ids)}
pageSize={pageSize}
onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
rowsPerPageOptions={[5, 10, 20]}
pagination
/>
I think you have to add outline directly , or try pesudo focus-within selector
export const StyledDataGrid = styled(DataGridPro)(({ theme }) => ({
backgroundColor: theme.palette.common.white,
border: 0,
"& .MuiDataGrid-columnHeader, .MuiDataGrid-cell, .MuiDataGrid-cellCheckbox":
{
border: 0,
outline: "none"
},
}));
export const StyledDataGrid = styled(DataGridPro)(({ theme }) => ({
backgroundColor: theme.palette.common.white,
border: 0,
"& .MuiDataGrid-columnHeader, .MuiDataGrid-cell, .MuiDataGrid-cellCheckbox":
{
border: 0,
"& :focus-within": {
outline: "none"
}
},
}));
I am struggling with changing MUI's Select background color. I've tried multiple solutions. I've tried changing it from <Select/> className property and it didn't work. Neither did setting it from Menu Prop's. I believe my theme might be causing this problem.
My select component
<Select
variant="standard"
id={id}
native={true}
className={classes.select}
MenuProps={{
sx: {
maxHeight: 200,
},
classes: {
paper: classes.paper,
},
}}
inputProps={{
classes: {
root: classes.root,
},
}}
sx={{
border: errors.installments
? "1px solid rgba(255, 0,0,0.5)"
: "1px solid rgba(0, 0, 0, 0.1)",
borderRadius: 1,
}}
disabled={installments ? false : true}
{...field}
></Select>
The styling sheet
export default makeStyles({
form: {
minWidth: 280,
maxWidth: "45%",
backgroundColor: "rgba(255, 255, 255, 0.1)",
borderColor: "rgba(255, 255, 255, 0.4)",
borderRadius: 1,
},
select: {
padding: 10,
"&:before": {
borderColor: "white",
borderRadius: 5,
content: "''",
},
"&:after": {
borderColor: "rgba(255, 255, 255, 0.7)",
borderRadius: 5,
},
"&:not(.Mui-disabled):hover::before": {
borderColor: "white",
borderRadius: 5,
},
'&:focus':{
backgroundColor: 'red'
}
},
root: {
color: "white",
borderRadius: 1,
},
paper: {
position: "absolute",
overflowY: "auto",
overflowX: "hidden",
// So we see the popover when it's empty.
// It's most likely on issue on userland.
maxHeight: 200,
},
});
The palette defined on the theme
palette: {
mode: "light",
primary: {
main: "#0f9688",
},
secondary: {
main: "#D96098",
},
info: {
main: "#007668",
},
background: {
paper: "#0f9688",
default: "ffffff",
},
},
MuiSelect with green background
You can modify the underlying <MenuList> styles by doing:
<Select
inputProps={{
MenuProps: {
MenuListProps: {
sx: {
backgroundColor: 'red'
}
}
}
}}
>
<Select>
componentsProps={{
listbox: {
sx: {backgroundColor: '#000'}
}
}}
</Select>
You can use the sx prop to change the color of the Select Component.
<Select
sx={{ backgroundColor:'red' }}
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
I'm using react-select and and I'm sending an object as options. The first element contains a title and second contains a subtitle. Using the getOptionLabel API I'm able to populate the option in my select field. This is the code along with its associated style:
export default (props) => {
const selectStyles = {
control: (_provided, state) => {
return {
..._provided,
width: "100%",
fontSize: "1rem",
verticalAlign: "middle",
color: "#1a1a1a",
appearance: "none",
minHeight: "auto",
};
},
valueContainer: (provided) => {
return {
...provided,
minHeight: "auto",
flexWrap: "nowrap",
overflowX: "auto",
padding: "0 .5rem",
};
},
container: (provided) => {
return {
...provided,
padding: 0,
flexGrow: "1",
};
},
option: (provided, { data, isSelected, isFocused }) => {
return {
...provided,
backgroundColor: isSelected ? "#98c1ff" : provided.backgroundColor,
color: data.color ? data.color : provided.color,
fontWeight: data.color ? "800" : provided.fontWeight,
cursor: "pointer",
paddingTop: ".25rem",
paddingBottom: ".25rem",
fontSize: "0.75em",
};
},
multiValue: (provided) => {
return {
...provided,
padding: ".25rem .5rem",
background: "#EBEBEB",
minHeight: "auto",
borderRadius: "2px",
marginRight: ".25rem",
flexShrink: "0",
};
},
multiValueLabel: (provided) => {
return {
...provided,
fontSize: ".75rem",
fontWeight: "400",
color: "#292929",
padding: 0,
};
},
multiValueRemove: (provided) => {
return {
...provided,
color: "#8F8F8F",
background: "transparent",
paddingRight: 0,
":hover": {
color: "#1B4EA3",
background: "transparent",
cursor: "pointer",
},
};
},
clearIndicator: (provided) => {
return {
...provided,
paddingTop: 0,
paddingBottom: 0,
minHeight: "auto",
};
},
dropdownIndicator: (provided) => {
return {
...provided,
paddingTop: 0,
paddingBottom: 0,
minHeight: "auto",
};
},
menu: (provided) => ({
...provided,
marginTop: ".5rem",
marginBottom: 0,
borderRadius: 0,
}),
menuList: (provided) => ({
...provided,
paddingTop: 0,
paddingBottom: 0,
}),
};
let {
name,
id,
options,
value,
} = props;
return (
<Select
{...props}
placeholder=""
id={id}
name={name}
value={value}
options={options}
getOptionLabel={(options) => `${options.title} ${options.subTitle}`}
styles={selectStyles}
/>
);
};
With this I'm able to get the following result:
However, I want the subtitle to have a different color, ideally like this:
You can override SingleValue and Option components and add custom style in your the wrapper components:
Options
const options = [
{
value: "chocolate",
title: "Chocolate",
subTitle: "Icescream"
},
{
value: "strawberry",
title: "Strawberry",
subTitle: "Icescream"
},
{
value: "vanilla",
title: "Vanilla",
subTitle: "Icescream"
}
];
Component
Option component: displays each option in the menu.
SingleValue component: displays the selected value in the input for a single select.
const SingleValue = (props) => {
const { title, subTitle } = props.getValue()[0];
return (
<components.SingleValue {...props}>
<span>{title}</span> <span style={{ color: "darkgray" }}>{subTitle}</span>
</components.SingleValue>
);
};
const Option = (props) => {
const { title, subTitle } = props.data;
return (
<components.Option {...props}>
<span>{title}</span> <span style={{ color: "darkgray" }}>{subTitle}</span>
</components.Option>
);
};
Usage
<Select
options={options}
getOptionLabel={(options) => `${options.title} ${options.subTitle}`}
components={{ SingleValue, Option }}
/>
Live Demo
I'm actually trying to override the input styling for the autocomplete component, I already overrided some of the styles on the theme, but I wasn't able to override the one for the input underline to remove it, on the devtools I found that I have to remove the borderBottom and the content styles but since this is kinda nested nothing that I tried worked:
Actual behavior
Desired behavior
This is what I need
This styles are working:
MuiAutocomplete: {
root: {
paddingLeft: "15px",
paddingRight: "15px",
},
groupLabel: {
fontWeight: 700,
color: "black",
fontSize: 14
},
option: {
paddingTop: "0px",
paddingBottom: "0px",
fontSize: 14,
height: "25px"
}
}
I tried something like this:
MuiAutocomplete: {
input: {
content: "",
borderBottom: "none"
},
inputFocused: {
content: "",
borderBottom: "none"
},
inputRoot: {
content: "",
borderBottom: "none"
},
root: {
paddingLeft: "15px",
paddingRight: "15px",
},
groupLabel: {
fontWeight: 700,
color: "black",
fontSize: 14
},
option: {
paddingTop: "0px",
paddingBottom: "0px",
fontSize: 14,
height: "25px"
}
}
Also tried using the makeStyles with inputRoot, input and inputFocused with no success:
const useStyles = makeStyles(theme => ({
inputRoot: {
"& .MuiInput-underline": {
content: "",
borderButton: "none"
},
"&:before .MuiInput-underline": {
content: "",
borderButton: "none"
},
"&.after ..MuiInput-underline": {
content: "",
borderButton: "none"
}
}
}));
Thanks in advice!
That underline is a pseudo element of the MuiInput-underline not the root input. Furthermore, a pseudo element cannot have a child so this &:before .MuiInput-underline type of syntax won't work
To solve this issue: just reference the generated root class, its descendant should be .MuiInput-underline, with pseudo element before
const useStyles = makeStyles(theme => ({
inputRoot: {
"& .MuiInput-underline:before": {
borderBottom: "none"
}
}
}));
<Autocomplete
renderInput={(params) => <TextField classes={{root: classes.inputRoot}} {...params} label="Combo box" />}
/>
material-ui introduces a way of using classname for styling component. I have a button component shown as below. It uses createStyles and withStyles to inject the styles as classes into the component. But I don't know how to set the focus style of the Button.
import Button from '#material-ui/core/Button';
const styles = createStyles({
button: {
minHeight: '3rem',
lineHeight: '3rem',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around',
fontSize: '0.8rem',
fontFamily: 'Roboto',
color: '#008091',
border: '2px solid #008091',
borderRadius: '0.375rem',
marginRight: '1rem',
marginTop: '2rem',
marginBottom: '2rem',
minWidth: '180px',
textAlign: 'center',
fontWeight: 700,
margin: '1rem 0',
padding: 0
},
selected: {
backgroundColor: '#008091',
color: 'white'
}
});
interface Props {
classes: { [className in keyof typeof styles]: string };
style?: React.CSSProperties;
text: string;
selected?: boolean;
onClick: (event: React.MouseEvent<HTMLElement>) => void;
}
const TextButton = ({ classes, style, text, onClick, selected }: Props) => {
return (
<Button
className={selected ? classNames(classes.button, classes.selected) : classes.button}
style={style}
onClick={onClick}
>
{text}
</Button>
);
};
Psuedo selectors can be added by:
const styles = createStyles({
button: {
// main styles,
"&:focus": {
color: "red"
}
}
});
This should do the trick
overrides: {
MuiButton: {
root: {
'&:focus': {
color: 'rgba(0, 0, 0, 0.87)',
backgroundColor: 'rgba(0, 0, 0, 0.87)',
},
},
},
},