react-mui-styles

react-mui-styles

You can leverage our styling solution, even if you are not using our components.

Install

Using npm:

npm install react-mui-styles

or using yarn:

yarn add 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.root}>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.root}>With styles component</div>;
}

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

export default withStyles(useStyles)(WithStylesComponent);