mui-styles

mui-styles


Material UI v5 and later versions

Install

Using npm:

``sh
npm install mui-styles
`

$3

`javascript
import { makeStyles } from "mui-styles";

const useStyles = makeStyles({
container: {
width: "100%",
height: 100,
padding: 10,
backgroundColor: '#fff',
borderRadius: 20
},
});

export default function App() {
const classes = useStyles();
return

;
}
`
MakeStyles with theme

`javascript
import { makeStyles, Theme } from "mui-styles";

const useStyles = makeStyles((theme: Theme) => ({
width: "100%",
height: 100,
padding: 10,
backgroundColor: theme.palette.primary.main,
borderRadius: 20,
}));

export default function App() {
const classes = useStyles();
return

;
}
`

Styled components

`javascript
import { styled } from "mui-styles";
import { Card } from "@mui/material";

const MuiCard = styled(Card)({
maxWidth: 300,
borderRadius: 20,
padding: 15,
margin: 20,
textAlign: "center"
});

export default function StyledComponents() {
return Styled with card;
}
`

With styles component

`javascript
import * as React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'mui-styles';

const useStyles = {
container: {
width: "100vw",
height: "100vh",
padding: 0,
},
};

function WithStylesComponent(props) {
const { classes } = props;
return

;
}

WithStylesComponent.propTypes = {
classes: PropTypes.object.isRequired,
};

export default withStyles(useStyles)(WithStylesComponent);
``

Authors

- @blencm