Cannot find a way to remove underline when using material-ui TimePicker and overriding styles.
Here is how i am overriding styles:
const muiTimePickerStyle = createTheme({
overrides: {
MuiTextField: {
root: {
width: "100%",
'&:after': {
underline: "none",
textDecoration: "none",
}
}
},
MuiInput: {
root: {
borderRadius: 0,
backgroundColor: "#fff",
border: '1px solid pink',
fontSize: 16,
padding: '10px 12px',
width: '100%',
underline: "none",
textDecoration: "none",
'&:hover': {
}
},
underline: {
underline: "none",
'&:hover': {
}
}
}
}
});
My code in CodeSandbox
Here's what you are looking for. I've added the after effect too if you wanted to remove the blue line when active.
underline: {
'&:hover:not(.Mui-disabled):before': {
borderBottom: 'none'
},
'&:after': {
borderBottom: 'none'
}
}
Enjoy
Related
i got a button that the its background color suppose to change base on state condition , green color for correct , and red for incorrect , so i just made three different css classes , all have similar attributes except the background color , classes changes base on a state with the optionBt class as a default value , how to add an interpolation to optionBt backgroundColor so i only have one class for this button?
const useStyles = makeStyles({
optionBt: {
width: "80%",
color: "#fff",
height: "2.5rem",
marginTop: "0.5rem",
borderRadius: "05%",
border: "2px solid #555",
cursor: "pointer",
},
optioncorrect: {
width: "80%",
color: "#fff",
height: "2.5rem",
marginTop: "0.5rem",
borderRadius: "05%",
border: "2px solid #555",
cursor: "pointer",
backgroundColor: "green",
},
optionuncorrect: {
width: "80%",
color: "#fff",
height: "2.5rem",
marginTop: "0.5rem",
borderRadius: "05%",
border: "2px solid #555",
cursor: "pointer",
backgroundColor: "red",
},
},
},
const QuestionOptions = ({ country, correctness }) => {
const classes = useStyles();
const [myColor, setMyColor] = useState(classes.optionBt);
return (
<Box className={myColor}>
<Button
variant="contained"
onClick={() => {
changeColor();
}}
>
{country}
</Button>
</Box>
);
};
const style={
button: {
width: "80%",
color: "#fff",
height: "2.5rem",
marginTop: "0.5rem",
borderRadius: "05%",
border: "2px solid #555",
cursor: "pointer",
'&:[is-correct="true"]'{
backgroundColor: "green"
},
'&:[is-correct="false"]'{
backgroundColor: "red"
}
}
}
const QuestionOptions = ({ country, correctness }) => {
// set state for true false condition
[isCorrect, setIsCorrect] = useState(undifind)
return (
<Box
<Button
is-correct={isCorrect === true ? 'true': isCorrect === false ? 'false':undifind}
className={style.button}
variant="contained"
onClick={() => {
// if correct set to true or false is uncorrect
setIsCorrect(true);
}}
>
{country}
</Button>
</Box>
);
};
If you want only one class you can do :
const useStyles = makeStyles({
optionBt: {
width: "80%",
color: "#fff",
height: "2.5rem",
marginTop: "0.5rem",
borderRadius: "05%",
border: "2px solid #555",
cursor: "pointer",
},
optioncorrect: {
width: "80%",
color: "#fff",
height: "2.5rem",
marginTop: "0.5rem",
borderRadius: "05%",
border: "2px solid #555",
cursor: "pointer",
backgroundColor: "green",
},
optionuncorrect: {
width: "80%",
color: "#fff",
height: "2.5rem",
marginTop: "0.5rem",
borderRadius: "05%",
border: "2px solid #555",
cursor: "pointer",
backgroundColor: "red",
},
},
},
const QuestionOptions = ({ country, correctness }) => {
const classes = useStyles();
const [myColor, setMyColor] = useState(classes.optionBt);
// set state for true false condition
[correctOrNot, setCorrectOrNot] = useState(null)
return (
<Box className={myColor}>
<Button
variant="contained"
onClick={() => {
// if correct set to true or false is uncorrect
setCorrectOrNot(true);
setsetMyColor(correctOrNot ? classes.optioncorrect : classes.optionuncorrect);
}}
>
{country}
</Button>
</Box>
);
};
Here is the demo link. Right now I give root a border style. However, I want to remove the border style when the switch is checked. How would I do this? Thanks for the help!
import * as React from "react";
import Switch from "#mui/material/Switch";
import { withStyles } from "#material-ui/core/styles";
const label = { inputProps: { "aria-label": "Switch demo" } };
const CustomSwitch = withStyles({
root: {
width: "40px",
height: "20px",
padding: "0px",
borderRadius: "10px",
marginRight: "8px",
border: "1px solid #606060",
position: "relative"
},
colorSecondary: {
"&.Mui-checked + .MuiSwitch-track": {
backgroundColor: "#05756C"
},
"&.Mui-checked": {
color: "white"
}
},
thumb: {
position: "absolute",
width: "12px",
height: "12px"
},
track: {
backgroundColor: "transparent"
},
switchBase: {
color: "#606060",
"&$checked": {
// color: 'white!important',
}
}
})(Switch);
export default function BasicSwitches() {
return (
<div>
<CustomSwitch {...label} />
</div>
);
}
Remove the border from the parent (SwitchBase) and put it in the track component inside so it can be targeted by CSS selector when the state of the sibling element changes:
root: {
...
// border: '1px solid #606060', // <-------------------- comment this line
},
track: {
backgroundColor: 'transparent',
borderRadius: '10px',
border: '1px solid #606060',
height: 'auto',
opacity: 1,
},
switchBase: {
color: '#606060',
'&.Mui-checked + $track': {
border: 'none',
},
},
Since you're using v5, you shouldn't use withStyles anymore, it is deprecated and will be removed in v6. Here is the equivalent demo in v5 using styled instead.
I'm using nextjs and Sass. All of my styles are worked fine but just when I'm using withStyles this warning appears
const LikeButton = withStyles((theme: Theme) => ({
root: {
color: "#666666",
fontSize: "1.3125rem!important",
fontWeight: 700,
maxWidth: "51px!important",
width: "51px!important",
minWidth: "51px!important",
backgroundColor: "#fcfbfa",
marginLeft: "1rem",
border: "1px solid #dcdcdc",
"& svg": {
fill: "currentColor",
color: "currentColor",
},
"&:hover": {
color: theme.palette.secondary.main,
backgroundColor: "#fcfbfa",
},
"&.Mui-disabled": {
backgroundColor: "#e6e6e6",
color: "#666666!important",
},
},
}))(Button);
I did all solutions mentioned in this link
https://www.mashen.zone/thread-3621719.htm
but didn't solve.
I use the material UI "createTheme" function. When ı write overrides for button and switch it's doesn't work. Material UI's None of the overrides features work but the theme palette, font-size working. Why it doesn't work? Thanks in advance.
// My overrides
overrides: {
MuiButton: {
primary: {
background: "pink",
},
sizeSmall: {
height: 22.5,
fontSize: 10,
padding: "0 15px",
},
sizeLarge: {
height: 37,
padding: "0 30px",
fontSize: 16,
},
text: {
background: "#1AD971",
borderRadius: 4,
border: 0,
color: "white",
padding: "0 22px",
height: 30,
textAlign: "center",
lineHeight: 1,
fontSize: 14,
fontWeight: 400,
"&:hover": {
backgroundColor: "#0BBF5D",
},
},
contained: {
backgroundColor: "#FFFFFF",
color: "#000000",
borderRadius: 30,
},
outlined: {
color: "#1AD971",
border: "1px solid #1AD971",
borderRadius: "15px",
},
},
MuiSwitch: {
switchBase: {
color: "#73889D",
},
colorSecondary: {
"&$checked": {
color: "#FFFFFF",
},
},
track: {
opacity: 1,
backgroundColor: "#213348",
"$checked$checked + &": {
opacity: 1,
backgroundColor: "#FFC231",
},
},
},
},
If you are working on MUI version 5, as mentioned in the comment above, you should be using the below code
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
border: '1px solid #ff4742',
background: 'white',
borderRadius: 12,
border: 0,
color: 'black',
height: 48,
padding: '0 30px',
fontWeight: 'bold',
boxShadow: '1px 2px 4px rgb(0 0 0 / 10%)',
}
}
},
}});
What exactly I want to do is to clip the background with only text using the CSS in Reactjs.
I have used Material UI for designing the page in react.
import { makeStyles } from '#material-ui/core/styles'
const useStyles = makeStyles({
root: {
minWidth: 275,
},
loginCard: {
width: '100%',
height: '100vh',
display: 'grid',
placeItems: 'center',
},
emailInput: {
margin: '0px 0px 20px 0px'
},
actions: {
padding: '16px'
},
submitBtn: {
marginLeft: 'auto',
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
fontSize: 25,
textAlign: 'center',
fontWeight: 'bold',
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
'&::-webkit-background-clip': 'text',
'&:: -webkit-text-fill-color': 'transparent'
},
pos: {
marginBottom: 12,
},
})
export default useStyles;
how to add background-clip property using CSS in js using react material UI?
to add -webkit-background-clip css style you've to use WebkitBackgroundClip in cssJS.
WebkitBackgroundClip compiles down to -webkit-background-clip.
Here is the working example of clipping the background with only text using only CSS in js
import React from "react";
import "./styles.css";
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
body:{
background: 'black',
textAlign: 'center',
padding: '120px 20px',
width:'100vw',
height:'100vh'
},
heading:{
display: 'inline-block',
fontSize: '80px',
lineHeight: 0.9,
padding: '20px',
fontFamily: "'Syncopate', sans-serif",
textTransform: 'uppercase',
background: 'radial-gradient(circle farthest-corner at center center,white,#111) no-repeat',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent'
}
}));
export default function App() {
const classes = useStyles();
return (
<div className={classes.body}>
<h1 className={classes.heading}>mega<br/>fancy</h1>
</div>
);
}
codesandbox link:- https://codesandbox.io/s/competent-poincare-zx3lb