CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
user1119742
user1119742

Reputation: 145

What is the correct way to use material-ui CSS?

I"m brand new to material-ui and react .. and I'm following this guide from material to my customize the css .

When I try to model the example

I get following

Cannot read property 'prepareStyles' of undefined

I understand that the following is an object that controls the CSS const theme = createMuiTheme()

but does it control all of material UI components ? Sorry if that doesn't make sense, but I'm just understand how can I apply styles to both the Button and AppBar

Does the following code tell material that all of the components on the theme use this palette?

const theme = createMuiTheme({
  palette: {
    primary: { main: purple[500] }, // Purple and green play nicely together.
    secondary: { main: '#11cb5f' }, // This is just green.A700 as hex.
  },
});

If so, how would I add a custom CSS rule to AppBar? Do I add the CSS to the object that gets return from const theme = createMuiTheme() ?

If someone could please take a look at my code pin and provide me an example to with styling my the Button and AppBar, I will really appreciate it

Upvotes: 1

Views: 2262

Answers (2)

loelsonk
loelsonk

Reputation: 3598

Thanks for sharing your codesandbox, it helped me understand the problem you are facing.

First of all you are using outdated material-ui package 0.20.x (very old), with latest core release 4.2.x. You cannot mix both packages.

To fix your problem you have to remove material-ui as dependency. Make sure you don't have any material-ui/* imports.

To get ThemeProvider to work you need to install another dependency.

npm install --save @material-ui/styles
// or if you use yarn
yarn add @material-ui/styles

Since 0.20 API has drastically changed. So be up to date following the docs.

Docs for material-ui are located here. Make sure docs points you to latest release. (See in upper right corner, current version is 4.2.1)

I've forked your pen, see working example

Upvotes: 1

TechnicalViking
TechnicalViking

Reputation: 757

What version of React and material-ui are you using?

As of version 4.2.1...

A good example on how the themeprovider works is in the material-ui docs directly her https://material-ui.com/customization/themes/

If you go into the Palette API documentation you will see that when you set the primary and secondary color within your theme provider you are setting the tone for the entire application. For example, if you were to create a button and set the color to primary then you would receive the primary color for from the theme provider.

This is straight from material-ui ...

import React from 'react';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import { purple } from '@material-ui/core/colors';
import Button from '@material-ui/core/Button';

const theme = createMuiTheme({
  palette: {
    primary: { main: purple[500] }, // Purple and green play nicely together.
    secondary: { main: '#11cb5f' }, // This is just green.A700 as hex.
  },
});

export default function Palette() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary">Primary</Button>
      <Button color="secondary">Secondary</Button>
    </ThemeProvider>
  );
}

When it comes to specific styling for each component, there are multiple ways that this can be done. I will use AppBar as an example. Following its API documentation found here you can set the color directly through common css/scss, you can use the overrides, or you can use the primary/secondary colors created in your theme provider.

Does the following code tell material that all of the components on the theme use this palette?

The answer is, it can, but you do not have to use it. Material-UI is a great tool for creating stylistic components with ease. They have came a long way over the last two years to make component customization easier and easier. The overrides are a great example of that. Most material-ui components are built on other material-ui components. Which can cause difficulty with styling. But with the new override feature you can easily override the child components. Documentation on overrides

Hope this helps!

Upvotes: 1

Related Questions