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" />}
/>
Related
Is it possible to change the header elements order? I want the arrows to be in the right and left side of the Month-Year title, and not as it is now. The image shows exactly what I'm trying to achieve:
Codesandbox: https://codesandbox.io/s/stupefied-butterfly-rkss81?file=/src/App.js
Do you have any idea how I can achieve it?
I tried to use
PrivatePickersFadeTransitionGroup and MuiPickersCalendarHeader
class names but it didn't work.
Thank you
Try to put replace your current style with this one:
const dateTimePaperPropsStyles = {
sx: {
".MuiPickersCalendarHeader-root": {
display: "flex",
alignItems: "center",
justifyItems: "center"
},
".MuiPickersCalendarHeader-root:first-child": {
order: 0,
paddingRight: "20px",
paddingLeft: "20px"
},
".MuiPickersArrowSwitcher-root": {
display: "inline-flex"
// visibility: "hidden"
},
".MuiPickersCalendarHeader-label": {
textAlign: "center"
},
".MuiPickersArrowSwitcher-spacer": {
width: "220px"
},
".css-31ca4x-MuiPickersFadeTransitionGroup-root": {
display: "flex",
position: "absolute",
paddingLeft: "80px"
},
".css-9reuh9-MuiPickersArrowSwitcher-root": {
marginLeft: "-2px"
},
".MuiPickersArrowSwitcher-button": {
paddingRight: "7px"
}
}
};
link to sandbox
I am creating a webpage using mui and and nextjs with typescript. Here I create two separate folder for using mui.
That's why I create a Styles folder-
Single.styles.ts Here I defin my all styles-
export default {
Title: {
fontSize: "18px",
pb: "10px",
mb: "20px",
borderBottom: `1px solid ${theme.palette.primary.border_bottom}`,
position: "relative",
fontWeight: 500,
"&:after": {
content: '""',
position: "absolute",
width: "25%",
bgcolor: "primary.main",
height: "2px",
left: "0",
bottom: "0"
}
},
}
And then I import it in my component I use it-
Single.tsx (Component)
//Styles
import styles from "Styles/Home/SingleTop.styles";
const SingleTop = () => {
return (
<Box>
<Typography variant="h6" component="h6" sx={styles.Title}>
This is title
</Typography>
</Box>
);
};
export default SingleTop;
And it's working perfectly.
Now I am trying to do responsiveness in this webpage. I already search it and I found it-
https://mui.com/material-ui/customization/breakpoints/
From This documentation I am facing two problems. I changes my Single.styles.ts file according to that documentation like this-
const styles = (theme) => ({
Title: {
fontSize: "18px",
pb: "10px",
mb: "20px",
borderBottom: `1px solid ${theme.palette.primary.border_bottom}`,
position: "relative",
fontWeight: 500,
"&:after": {
content: '""',
position: "absolute",
width: "25%",
bgcolor: "primary.main",
height: "2px",
left: "0",
bottom: "0"
},
[theme.breakpoints.up('lg')]: {
}
}
})
export default styles;
And here I found two error. One is type difination for theme. Here How can I define types for this-
const styles = (theme: //Types)=> ({});
My second problem is Where I use this styles in my component by using sx-
sx={styles.Title}
I found this error here-
Property 'Title' does not exist on type '(theme: any) => {}
Please help me how can I solve that problem. How can I apply them perfectly? What is the right way?
I cannot change font-color in TextField Material UI component. I try to do it using createTheme() and when I add class '& .MuiOutlinedInput-input' in code sandbox font-color changes as it should, but when I apply it to the app code it doesn't work.
Will appreciate Your support.
Below is the implementation:
const theme = createTheme({
components: {
MuiOutlinedInput: {
styleOverrides: {
root: {
backgroundColor: `#EDEDED`,
'& .MuiOutlinedInput-notchedOutline': {
border: 'none',
},
'&.Mui-focused': {
'& .MuiOutlinedInput-notchedOutline': {
border: 'none',
},
},
'& .MuiOutlinedInput-input': {
padding: '10px',
fontSize: '13px',
color: 'red',
},
},
},
},
},
});
<ThemeProvider theme={theme}>
<InputForm
name={'phoneNumber'}
id={'phoneNumber'}
label={phoneNumberLabelTxt}
disabled={isDisabledInputs}
/>
</ThemeProvider>
Your code worked in my local repo. however if its not working for you then try below code which also worked for me.
'&.MuiOutlinedInput-root': { // no space between & and .
padding: '10px',
fontSize: '13px',
color: 'red',
},
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)',
},
},
},
},
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
}}
>