I am wondering if there is a way to group CSS selectors with Material-UI to avoid repetition, from something like this:
const useStyles = makeStyles(() => ({
root: {
backgroundColor: '#000000',
color: '#ffffff',
'&::before': {
content: '""',
position: 'absolute',
borderTop: '1px solid white',
},
'&::after': {
content: '""',
position: 'absolute',
borderTop: '1px solid white',
}
},
}));
To something that would look more or less like this?
const useStyles = makeStyles(() => ({
root: {
backgroundColor: '#000000',
color: '#ffffff',
'&::before',
'&::after': {
content: '""',
position: 'absolute',
borderTop: '1px solid white',
}
},
}));
Thanks for your help!
I actually found the solution, it was as simple as using a comma between the 2 CSS selectors:
const useStyles = makeStyles(() => ({
root: {
backgroundColor: '#000000',
color: '#ffffff',
'&::before, &::after': {
content: '""',
position: 'absolute',
borderTop: '1px solid white',
}
},
}));
Related
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%)',
}
}
},
}});
I'm trying to apply an animation to an arrow in a react component using JSS. I can't seem to get the keyframes correct and getting the error TypeError: container.addRule(...).addRule is not a function
const useStyles = createUseStyles({
'#keyframes sdb05': {
from: {
transform: 'rotate(-45deg) translate(0, 0)',
opacity: 0
},
to: {
transform: 'rotate(-45deg) translate(-20px, 20px)',
opacity: 1
}
},
arrow:{
animationName: '$sdb05',
zIndex: 2,
display: 'inline-block',
'-webkit-transform': 'translate(0, -50%)',
transform: 'translate(0, -50%)',
color: '#fff',
letterSpacing: '.1em',
textDecoration: 'none',
transition: 'opacity .3s',
width: 50,
height: 50,
backgroundColor: 'rgb(255,255,255, 0.5)',
borderRadius: '50%',
'&:after': {
position: 'absolute',
bottom: 0,
left: 0,
content: '',
width: '100%',
height: '80%',
background: '-webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%)'
},
'& a': {
'& span':{
position: 'absolute',
top: 8,
left: '50%',
width: 24,
height: 24,
marginLeft: -12,
borderLeft: '2px solid #000',
borderBottom: '2px solid #000',
'-webkit-transform': 'rotate(-45deg)',
transform: 'rotate(-45deg)',
'-webkit-animation': 'sdb05 1.5s infinite',
'animation': 'sdb05 1.5s infinite',
boxSizing: 'border-box'
},
'&:hover': {
opacity: .5
}
}
}
});
const Arrow = () => {
const classes = useStyles();
return (
<div className={classes.arrow}>
<span></span>
</div>
);
};
How can I correctly set my keyframes to enable the animation?
The animation should function like this: link
If you are using JSS v10 or higher, the code you posted now is correct, you can see what is being generated in the browser and here https://cssinjs.org/repl
Now you have some problem with the actual animation, not with JSS.
Add the #keyframes on the top level, not inside of the rule
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