react-mui-styles

react-mui-styles

Please use the latest version 2.x. Versions prior to are deprecated with bugs.

Version	Compatible
^5.x	MUI
^18.x	React
^14.x	Node

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 { Theme } from '@mui/material';
import { makeStyles } 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);