CSS on Material UI Components

Styling material UI components

I should've used JssProvider and tell it to put material UI styles before mine in the page head section.

import JssProvider from 'react-jss/lib/JssProvider';
import { create } from 'jss';
import { createGenerateClassName, jssPreset } from 'material-ui/styles';

const generateClassName = createGenerateClassName();
const jss = create(jssPreset());
// We define a custom insertion point that JSS will look for injecting the styles in the DOM.
jss.options.insertionPoint = document.getElementById('jss-insertion-point');

function App() {
  return (
    <JssProvider jss={jss} generateClassName={generateClassName}>
      ...
    </JssProvider>
  );
}

export default App;

How to use CSS inside a React + Material-UI project?

It is definitely possible to turn that CSS into JSS which MUI uses under the hood. It's not that hard if you toy around in the JSS playground and see the generated CSS. For instance:

keyframes short_press {
  to: { transform: rotate(360deg); }
}

.submit-button {
  display: block;
}

.submit-button:hover, .submit-button:focus {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.submit-button > span {
  display: block;
}

.submit-button.animated {

}

Will be:

import { makeStyles } from '@material-ui/styles';

let useStyle = makeStyles({
  '@keyframes short_press': {
    to: { transform: 'rotate(360deg)' },
  },
  button: {
    display: 'block',
    '&:hover, &:focus': {
       boxShadow: '0 5px 15px rgba(0, 0, 0, 0.1)',
    },
    '& > span': {
       display: 'block',
    },
    '&.animated': {
      animation: '$short_press 1s infinite linear',
    }
  },});

function YourButton() {
  let css = useStyle();
  return (
    <button className={`${css.button} ${animated ? 'animated' : ''}`}>
      Click
    </button>
   );
}

How to override css properties of Material UI components

There are several ways to do this, you can directly override the built-in CSS class of an MUI component using the class name in your imported CSS file, for example in if you want to change the Button component's style, you can do this by applying your required CSS properties to .MuiButton-root class on your "CSS" file. Like bellow.

.MuiButton-root{
   color: white;
   height: 20px;
   padding: 10px;
}

You can also use the available props of a component, you can easily find them in their individual documentation page of mui site.
Again you can use makeStyles or styled to style your component.
Here is an example to use makeStyles in your Button component.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Button, TextField } from '@material-ui/core';

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',
        },
     });

function RenderComponent(){
    const classes = useStyles();
    return(
        <>
            <Button className={classes.root} variant="contained">Contained</Button>
            <TextField id="outlined-basic" label="Outlined" variant="outlined" />
        </>
    )
}

export default RenderComponent

You can find more about styles here.

How to style material-ui select component with style-components (not material-ui classes!) in react?

It isn't doing much since Material UI components are not simple HTML elements. For example, if you look in the HTML tree in dev tools, a "Select" is rendered not as a <select>...</select> but rather as...

<div>
  <label />
  <div>
    <div />
    <input />
    <svg>
      <path />
    </svg>
    <fieldset>
      <legend>
        <span />
      </legend>
    </fieldset>
  </div>
</div>

The styles are nested at various levels of the above component tree, so to modify a particular border or background style, you will have to know exactly which element to target using a specific selector (since the id properties change on every render).

Instead, you can continue to use the css properties provided in the material documentation, but do not attempt to replace the Material UI root component by defining it as a styled component. If you wrap the Material Select component in another div of your own, made with styled-components, then you can pass down those attributes to the children Material elements similar to how you are doing now.

Some attributes will need a "!important" flag to override the style in Material, and some will require you to use the somethingProps (e.g. "menuProps", "inputProps", etc.) properties in order to override the style. This is because while overriding it manually with the class name from the docs and a "!important" flag is very good at targeting one (or a couple) of the components in the tree, when you use the somethingProps properties, Material will automatically cascade those styles to the right elements in the tree.

Only use the CSS of Material UI React Components

I don't know exactly if this implements the exact same components of the material ui framework, but I've used it for apps that require material design and it seems to be what you are looking for. Also from looking at the source of Material UI there seems to be no easy way to extract the stylesheets.

https://www.muicss.com/

Hope this helps

Material UI: styled child component not applying css rules

styled causes a className prop to be passed to the wrapped component, but Child isn't passing the className prop along to Typography.

Here's an example of how to fix Child.tsx:

import { Typography } from "@mui/material";
import { FunctionComponent } from "react";

export const Child: FunctionComponent<{ className?: string }> = ({
  className
}) => {
  return <Typography className={className}>Child</Typography>;
};

Can you overwrite styles in Material UI using css/scss?

Below is the correct syntax:

.button {
  padding: 10px;
  margin-bottom: 10px;
  &:global(.MuiButton-containedPrimary) {
    border: 2px solid red;
    background-color: red;
  }
}

The example above has two key changes:

1. Using :global(.MuiButton-containedPrimary). Without using :global, CSS modules will transform the MuiButton-containedPrimary into a class name unique to this module and then it won't match what Material-UI puts on the button.

2. Adding the & in front effectively creates a selector like .button.MuiButton-containedPrimary matching an element with both classes on it. Your original syntax would treat .MuiButton-containedPrimary as a descendant selector and only match elements with that class that are a descendant of the button rather than the button itself.

How do we apply css properties in material ui elements?

You have to wrap your Button inside a Box component to apply spacing properties like this

<Box mt={2} color="primary" clone>
<Button variant="contained">
  Primary
</Button>
</Box>

Because Button component don't receive these spacing properties by default.

---

Related Topics