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
}
}
}));
Related
Error:
TypeScript error in D:/Projects/React
Projects/almond-boats/src/App.tsx(32,8): Type '{ children: string; }'
is missing the following properties from type 'Omit<number,
"className" | "theme">': toFixed, toExponential, toPrecision TS2739
my code as follows:
import { Button } from "#mui/material";
import { styled } from "#mui/styles";
const MyButton = styled(Button)({
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",
});
const App = () => {
return <MyButton> hey there</MyButton>;
};
export default App;
how to solve this...
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
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] }} />
Here you can see example of using material ui styles outside of a react component.
import React from 'react';
import { makeStyles } from '#material-ui/styles';
import Button from '#material-ui/core/Button';
const useStyles = makeStyles({
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',
},
});
export default function Hook() {
const classes = useStyles();
return <Button className={classes.root}>Hook</Button>;
}
I want to do the same, but inside react component:
class Component extends React.Component {
render() {
const {height} = this.props
const useStyles = makeStyles({
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: height,
padding: '0 30px',
},
});
const classes = useStyles();
return <Button className={classes.root}>Hook</Button>;
}}
Is it possible?
I see that here have to be correct version of react with hooks , but I've not found any example where peoples use it inside class makeStyles
makeStyles creates a React hook; because of this, you cannot inter-operate with class components.
Hooks are used to replace classes entirely since React is moving more in the direction of purely functional components for the sake of compiler optimizations and other low level things (though there are external benefits for devs as well such as being less verbose and taking better advantage of and being more intuitive with the functional nature of JS). In the case of makeStyles, you get additional benefits such as being able to use any variable including those from what would traditionally be props and state, and automatically your JSS re-calculates only based on observable params you have provided vs when any prop changes.
Instead, as #Richard Ansell pointed out, you should use withStyles if you are not comfortable outside classes. This is a High Order Component. Would suggest though that in newer code bases, you learn hooks and adapt to that as hooks can represent almost all functionality from both HOCs and components when you become better at them.
Below is the example given from the material-ui documentation (RTFM here):
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/styles';
import Button from '#material-ui/core/Button';
const styles = {
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',
},
};
function HigherOrderComponent(props) {
const { classes } = props;
return <Button className={classes.root}>Higher-order component</Button>;
}
HigherOrderComponent.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(HigherOrderComponent);
From what I can gather, you can simply use the withStyles API that can wrap your component and inject your style directly into your exported component. See the following page that will explain this in more detail: withStyles
Example:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/styles';
import Button from '#material-ui/core/Button';
const styles = {
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',
padding: '0 30px',
},
};
function HigherOrderComponent(props) {
const { classes, customHeight } = props;
return <Button className={classes.root} style={{minHeight: customHeight, maxHeight: customHeight}}>Higher-order
component</Button>;
}
HigherOrderComponent.propTypes = {
classes: PropTypes.object.isRequired,
customHeight: PropTypes.object.isRequired
};
export default withStyles(styles)(HigherOrderComponent);
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);