Material-ui makeStyles: how to style by tag name?

Asked
Active3 hr before
Viewed126 times

8 Answers

makestylesstylematerial
90%

I want to add a rule for all <p> in the current component. I couldn't find information anywhere (material-ui documentation, Stack Overflow, etc.) on how to add CSS rules by tag name., Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers , Meta Stack Overflow

Since you want this scoped to your component, you need a class to apply to your component (e.g. classes.root in the example below). Then you can target all p elements within that using & p. If you then need to override the p tag styling for another CSS class within your component, you can use another nested rule to target p tags that also have that class (e.g. classes.title in the example).

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: {
    "& p": {
      margin: 0,
      "&$title": {
        margin: "0 0 16px"
      }
    }
  },
  title: {}
}));
export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <p>This paragraph isn't affected.</p>
      <p>This paragraph isn't affected.</p>
      <div className={classes.root}>
        <p className={classes.title}>My title</p>
        <p>A paragraph</p>
        <p>Another paragraph</p>
      </div>
    </div>
  );
}
88%

The injection of style tags happens in the same order as the makeStyles / withStyles / styled invocations. For instance the color red wins in this case:,The StylesProvider component has an injectFirst prop to inject the style tags first in the head (less priority):,This is the simplest case. the wrapped component accepts a classes prop, it simply merges the class names provided with the style sheet.

import { ThemeProvider } from '@material-ui/core/styles';
import DeepChild from './my_components/DeepChild';

const theme = {
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
};

function Theming() {
  return (
    <ThemeProvider theme={theme}>
      <DeepChild />
    </ThemeProvider>
  );
}
load more v
72%

Without knowing how Material UI's CSS rules work, attempting to restyle the Button on your own may cause you to have an anxiety attack! Don't worry. Material UI makes it easy to add custom CSS to any element inside any component. They have many guides on this covering the styling APIs, themes and components.,How do I style Material UI Components with my own CSS?,How to style inner HTML elements in Material UI

import React from 'react';import { makeStyles } from '@material-ui/core/styles';import Button from '@material-ui/core/Button';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',  },});export default function Hook() {  const classes = useStyles();  return <Button className={classes.root}>Hook</Button>;}
import React from 'react';import { makeStyles } from '@material-ui/core/styles';import Button from '@material-ui/core/Button';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',  },});export default function Hook() {  const classes = useStyles();  return <Button className={classes.root}>Hook</Button>;}

This is pretty much it, taken from a contained Button example:

<button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary" tabindex="0" type="button"> <span class="MuiButton-label">Primary</span> <span class="MuiTouchRipple-root"></span></button>
<button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary" tabindex="0" type="button"> <span class="MuiButton-label">Primary</span> <span class="MuiTouchRipple-root"></span></button>

That looks like this:

<Button  classes={{    root: classes.root, // class name, e.g. `classes-nesting-root-x`    label: classes.label, // class name, e.g. `classes-nesting-label-x`  }}>  classes nesting</Button>
<Button  classes={{    root: classes.root, // class name, e.g. `classes-nesting-root-x`    label: classes.label, // class name, e.g. `classes-nesting-label-x`  }}>  classes nesting</Button>
load more v
65%

You will eventually get to your destination if you continue to tackle it one step at a time. Find me on Twitter @NetalyCodes,Depending on what route you end up choosing you can pass arguments into useStyles or your makeStyles in order to adapt your style depending on a condition.,In order to use makeStyles function in your application you will need to import it in the component in where you plan to access the css that results from your makeStyles function. This is assuming you have already installed Material Ui in your project.

In order to use makeStyles function in your application you will need to import it in the component in where you plan to access the css that results from your makeStyles function. This is assuming you have already installed Material Ui in your project.

* //* ../src/yourComponent.jsimport { makeStyles } from '@material-ui/core/styles';
load more v
75%

Pretag
 Pretag team - issue, fix, solve, resolve
40%

That class name string is passed into the className prop to apply the class from the styles object.,The classes object is then available as a prop so we can apply the class names that are generated.,In the example below, we passed in the App component so that the styles will be applied. If we passed in App as we do below, then we’ll get access to the classes prop, which has the class name that we can access within the class object.

Pretag
 Pretag team - issue, fix, solve, resolve
22%

This guide will discuss the step-by-step process of creating and styling a React app with Material UI.,Using a Container to Wrap a React App,You can use a Create React App template to quickly initialize a React project without doing any manual configurations.

1n px create - react - app react - material - ui - example
2 cd react - material - ui - example
load more v
60%

ProductsSearch for Java codeSearch for JavaScript code,ResourcesFAQBlogTabnine AcademyStudentsTerms of usePrivacy policyJavascript Code Index

</TableCell>
<TableCell>
 <Chip
  color="primary"
  label={order.status}
load more v

Other "makestyles-style" queries related to "Material-ui makeStyles: how to style by tag name?"