2.0.5 • Published 6 months ago
react-mui-styles v2.0.5
react-mui-styles
Version | Compatible |
---|---|
^18.x | React |
^5.x | MUI |
Install
Using npm:
npm install react-mui-styles
Usage Example
import * as React from "react";
import { makeStyles } from "react-mui-styles";
const useStyles = makeStyles({
container: {
width: "100vw",
height: "100vh",
padding: 0,
},
});
export default function App() {
const classes = useStyles();
return <div className={classes.container}>Hello world</div>;
}
MakeStyles with theme
import * as React from "react";
import { makeStyles, Theme } from "react-mui-styles";
const useStyles = makeStyles((theme: Theme) => ({
container: {
width: "100vw",
height: "100vh",
padding: 0,
},
[theme.breakpoints.down('md')]: {
container: {
width: 100
},
},
[theme.breakpoints.down('sm')]: {
container: {
width: 300
},
},
[theme.breakpoints.down('xs')]: {
container: {
width: 500
},
}
}));
export default function App() {
const classes = useStyles();
return <div className={classes.container}>Hello world</div>;
}
Styled components
import * as React from "react";
import { styled } from "react-mui-styles";
import { Card } from "@mui/material";
const MuiCard = styled(Card)({
borderRadius: 5,
padding: 15,
textAlign: "center",
maxWidth: 200,
});
export default function StyledComponents() {
return <MuiCard>Styled with card</MuiCard>;
}
With styles component
import * as React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'react-mui-styles';
const useStyles = {
container: {
width: "100vw",
height: "100vh",
padding: 0,
},
};
function WithStylesComponent(props) {
const { classes } = props;
return <div className={classes.container}>With styles component</div>;
}
WithStylesComponent.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(useStyles)(WithStylesComponent);
Authors
2.0.5
6 months ago
2.0.3
9 months ago
2.0.2
10 months ago
2.0.1
10 months ago
2.0.0
10 months ago
1.3.0
10 months ago
1.2.9
10 months ago
1.2.7-beta
10 months ago
1.2.7
10 months ago
1.2.6
10 months ago
1.2.5
10 months ago
1.2.4
10 months ago
1.2.3
10 months ago
1.2.2
10 months ago
1.2.1
10 months ago
1.2.0
10 months ago
1.1.9
10 months ago
1.1.8
10 months ago
1.1.7
10 months ago
1.1.6
10 months ago
1.1.5
10 months ago
1.1.4
10 months ago
1.1.3
10 months ago
1.1.2
10 months ago
1.1.1
10 months ago
1.1.0
10 months ago
1.0.4
10 months ago
1.0.3
10 months ago
1.0.2
10 months ago
1.0.1
10 months ago
1.0.0
10 months ago
0.0.1
10 months ago