How to center a material ui icon in a button?
import AddIcon from '#material-ui/icons/Add';
<Button><AddIcon style={{ bottom: 3, right: 3 }}/>ADD</Button>
enter image description here
There is a special type of button called Buttons with icons and label.
You can read more about it here.
To add custom styles to Material ui you need to makeStyles
Example
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
...
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
},
label: {
textTransform: 'capitalize',
},
});
...
const classes = useStyles();
return (
<AddIcon
classes={{
root: classes.root,
label: classes.label,
}}
>
//using a standard css colour
<BathroomTwoToneIcon style={{ color: "blue" }} />
//import a material ui colour, and use that
import { purple } from "#mui/material/colors";
<BathroomIcon style={{ color: purple[500] }} />
Related
I am learning about MUI and got this error. The purpose of the code is to be responsive. Thank you very much.
Link CodeSandbox
In v5, ThemeProvider should be defined at the root of your application and useStyles should not be called before ThemeProvider
Reference link
Referenced Sandbox link
import ReactDOM from "react-dom";
import {
ThemeProvider,
createTheme,
StyledEngineProvider
} from "#mui/material/styles";
import Demo from "./demo";
const theme = createTheme();
ReactDOM.render(
<ThemeProvider theme={theme}>
<StyledEngineProvider injectFirst>
<Demo />
</StyledEngineProvider>
</ThemeProvider>,
document.querySelector("#root")
);
import { makeStyles } from "#mui/styles";
import Button from "#mui/material/Button";
const useStyles = makeStyles((theme) => ({
root: {
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
border: 0,
borderRadius: 3,
boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
color: "white",
height: 48,
padding: "0 30px",
[theme.breakpoints.down("md")]: {
padding: "40px"
}
}
}));
export default function Hook() {
const classes = useStyles();
return <Button className={classes.root}>Styled with Hook API</Button>;
}
Using styled component API
import { styled } from "#mui/material/styles";
const MyButton = styled("button")(({ theme }) => ({
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
border: 0,
borderRadius: 3,
boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
color: "white",
height: 48,
padding: "0 30px",
[theme.breakpoints.down("sm")]: {
background: "blue"
}
}));
export default function Hook() {
return <MyButton>something</MyButton>
}
import { styled } from '#mui/material/styles';
const useStyles = styled((theme) => ({
root: {
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
border: 0,
borderRadius: 3,
boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
color: "white",
height: 48,
padding: "0 30px",
[theme.breakpoints.down("md")]: {
height: 100
}
}
}));
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.
The need arises when there are multiple thumbs in a slider. In such a scenario, it is not known which thumb the user intends to move by clicking the track.
Solution:
When multiple thumbs are present, the values can only be controlled by moving the thumb:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles, makeStyles } from '#material-ui/core/styles';
import Slider from '#material-ui/core/Slider';
import Typography from '#material-ui/core/Typography';
import Tooltip from '#material-ui/core/Tooltip';
const useStyles = makeStyles((theme) => ({
root: {
width: 300 + theme.spacing(3) * 2,
},
margin: {
height: theme.spacing(3),
},
}));
const AirbnbSlider = withStyles({
root: {
color: '#3a8589',
height: 3,
padding: '13px 0',
},
thumb: {
height: 27,
width: 27,
backgroundColor: '#fff',
border: '1px solid currentColor',
marginTop: -12,
marginLeft: -13,
boxShadow: '#ebebeb 0 2px 2px',
'&:focus, &:hover, &$active': {
boxShadow: '#ccc 0 2px 3px 1px',
},
'& .bar': {
// display: inline-block !important;
height: 9,
width: 1,
backgroundColor: 'currentColor',
marginLeft: 1,
marginRight: 1,
},
},
active: {},
track: {
height: 3,
},
rail: {
color: '#d8d8d8',
opacity: 1,
height: 3,
},
})(Slider);
function AirbnbThumbComponent(props) {
return (
<span {...props}>
<span className="bar" />
<span className="bar" />
<span className="bar" />
</span>
);
}
I was facing the same issue and stumbled onto this question.
I am using styled components to create overridden styles on the Slider component. You can also do this by the classes attribute provided internally by Material UI.
I was able to solve it by doing two things:
Set pointer-events: none !important on the class MuiSlider-root.
Set pointer-events: all !important on the class MuiSlider-thumb.
You can check out a working solution here: https://codesandbox.io/s/busy-mcclintock-1hw1x?file=/src/MultiRangeSlider.jsx:366-381
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
I tried to create a custom styled button with material ui to reuse in other files of my project. Somehow, the button does not adapt the style i defined. Could someone tell me where I made a mistake / forgot something ?
import React from 'react';
import { withStyles } from '#material-ui/core/styles';
import IconButton from '#material-ui/core/IconButton';
const styles = themes => ({
root: {
margin: "50px",
padding: "20px",
display: 'block'
},
button: {
marginTop: '20px',
padding: '100px',
height: "300px+15vh",
width: "300px+15vw",
borderRadius: "20% 20%",
color: '#FFFFFF',
backgroundColor: '#05164D',
'&:hover': {
backgroundColor: "rgba(5, 22, 77, 0.75)",
boxShadow: '0 3px 5px 2px rgba(153, 153, 153, .8)'
},
},
});
const styledButton = props => {
const { classes } = props;
return (
<div>
<IconButton className={classes.button} {...props} aria-label="Gift" disableTouchRipple="true">
{props.children}
</IconButton>
</div>
)
}
export default withStyles(styles)(styledButton);