Is there a method to specify classes using Material UI's createTheme tool?

While I have a good grasp on the fundamentals of MUI's createTheme and modifying default component styles like Typography, I'm not sure how to target specific classNames. Specifically, I'm looking to create themes exclusively for certain Typography/Grid components based on breakpoints, but the documentation doesn't provide clear examples on changing target components. Here's what I've been able to come up with so far:

 let theme = createTheme({
    typography: {
        fontFamily: "Inter, sans-serif",
        color: "#212b37",
        h5: {
            fontSize: 40,
        },
        body: {
            fontSize: 18,
        },
    },
    root: {
        sample_class: {
            fontSize: 40,
        }
    }
});

I noticed mention of root in the docs, so I took a guess and included sample_class hoping it would select elements with that className.

reactjsmaterial-uimaterial-design

Answer №1

To provide some context, I am utilizing MUI version ^5.0.0-rc.1.

You may want to experiment with the following approach in createTheme:

Option 1:

MuiTypography: {
  styleOverrides: {
    h6: ({ ownerState }) => (ownerState.className === "MyClass" ? { color: "red" } : {}),
  },
},

The value "MyClass" represents the class name for which you wish to implement theme stylings.

Option 2:

This option is more streamlined.

MuiTypography: {
  styleOverrides: {
    h6: {
      '&.MyClass': { color: 'red' },
    },
  },
},

Subsequently, you can apply this to your Typography element:

<Typography variant="h6" className="MyClass">Hello world</Typography>

If you use VS Code, you can Command+Click until you reach the TypographyClasses interface, which provides a comprehensive list of typography classes for overriding.

Below are some helpful links about ownerState for component customization:

This method was also effective when attempting to style another component, like the MuiAccordion, without altering the existing variants as they already had their own default styles.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to vertically align Material UI ListItemSecondaryAction in a ListItem

I encountered an issue with @material-ui/core while trying to create a ListItem with Action. I am looking for a way to ensure that the ListItemSecondaryAction stays on top like ListItemAvatar when the secondary text becomes longer. Is there any solution to ...

reactjstypescriptmaterial-ui

Utilizing MaterialUI icons effectively in CoreUI React

To incorporate Material UI icons into a React dashboard template of CoreUI, I added @mui/material and @mui/icons-material by running the following commands: npm install @mui/material @emotion/react @emotion/styled And npm install @mui/icons-material This ...

reactjsmaterial-uicore-ui

Solidity smart contract failing to provide accurate output

Within my ERC20 solidity smart contract, I've implemented the following function: function getSummary() public view returns (string, string, address, uint, uint){ return( symbol, name, creator, balances[msg.sender], ...

reactjsethereumsolidityweb3jsmetamask

Using the same `node_modules` folder for multiple React applications

I've configured React using NodeJS following the instructions on this link As I dive deeper into learning React, I find myself working on multiple small projects. Utilizing create-react-app has its drawbacks: It takes time to create a new app (even ...

node.jsreactjs

The issue in Docker arises when the standard_init_linux.go script fails on line 219, leading to an error where the user process cannot

Encountering a docker issue while executing the command docker-compose up -d --build. Upon execution, 3 containers namely app, database, and api are created under the application named innovation. However, there seems to be an error when trying to access t ...

node.jsreactjsdocker

Is there a way to stop Material UI from dulling the color of my AppBar when using dark mode in my theme?

When I use mode: "dark" in my Material UI theme, it causes the color of my AppBar to become desaturated. Switching it to mode: "light" resolves this issue. This is how my theme is configured: const theme = createTheme({ palette: { ...

reactjstypescriptmaterial-uireact-typescript

The overflow-x property causes the left side of the component to be cut off when scrolling

When the screen width is insufficient to display a component properly, I need it to be horizontally scrollable. However, when scrolling to the left after making it scrollable due to a smaller screen size, the left side of the component gets cut off and can ...

cssreactjsstyled-components

The request to send an OTP using the endpoint "http://localhost:4000/api/v1/auth/sendotp" returned a

While working on a project, I encountered an issue with sending an OTP to the provided email upon sign up. Initially, everything was functioning correctly when tested using Postman; however, after connecting the backend and frontend and attempting to send ...

reactjsnode.jsssl

What are some techniques for applying masking to various elements beyond just input fields within React?

I am currently developing an admin dashboard using NextJS and MaterialUI (mui), and I am facing a challenge with masking certain values, such as phone numbers, that are retrieved from the backend without any masking applied. While I have successfully impl ...

javascriptreactjsnext.js

How can you include extra information in your Stripe session?

Here is the code snippet for my session: const stripe = require('stripe')(process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY); export default async function handler(req, res) { if (req.method === 'POST') { try { const par ...

reactjsnext.jsstripe-payments

How can I modify the preset website design in React.js (vite)?

Whenever I start a new react js project, I am always met with the default template that includes unnecessary code. I find myself spending time navigating through different files to clean it up before I can start building. I've been searching for a bla ...

reactjsnpmcreate-react-appvite

The Parallax effect reference hook does not seem to be functioning properly with components in NextJs

I'm attempting to implement the useParallax hook on an element within my JavaScript file. My setup involves NextJs, ReactJs, and styled components. Here is how I integrated the hook: Mainland.js import React, { useEffect, useRef } from 'react&ap ...

htmlreactjsreact-hooksnext.jsuse-ref

How can the error color for Material-UI TextField/Select be customized using the createMuiTheme function?

In my application, I have implemented a custom input style for text fields and selects. This custom style is provided by a ThemeProvider. The theme file snippet is as follows: ... overrides: { MuiInput: { input: { color: '#404040&apo ...

reactjsmaterial-ui

Swapping IMG depending on breakpoint in Material-UI

I understand how to adjust styling with breakpoints for various properties like height, width, and font size. However, I am struggling to find examples of switching images based on screen sizes. My goal is to replace an image with a different one dependin ...

cssreactjsmaterial-uiresponsive-images

Enhancing ReactJS App with PHP backend: Tips for implementing hot reload on your local machine

Currently, I am in the process of developing a ReactJS-App that is connected to a PHP backend. To streamline my workflow, I have MAMP set up on my local machine with a virtual host pointing to the root of my project, and I utilize webpack for bundling my R ...

reactjsproxymampwebpack-dev-serverlivereload

JSS questionings

While working with CSS in JS (JSS) and material-ui, I have encountered some challenges. I am able to inject styles effectively based on the context, but I am unsure of the additional benefits or features that it offers beyond style injection For example, ...

material-uijss

The error I encountered with the Typescript React <Select> onChange handler type was quite

Having an issue while trying to attach an onChange event handler to a Select component from material-ui: <Select labelId="demo-simple-select-label" id="demo-simple-select" value={values.country} onChange={handleCountryChange} ...

javascriptreactjstypescriptmaterial-ui

Utilizing a functional component to incorporate a "load more" button in ReactJS

Hey everyone, I've come across this ReactJS code that I need some help with: function DisplaySolutions({solutions}) { const topSolutions = solutions.slice(0, 4); const remainingSolutions = solutions.slice(4); const [isD ...

javascriptreactjs

I need help placing the image (referred to as 'self' in the code) within the designated blue circle. My project involves utilizing Material UI and React for this task

https://i.stack.imgur.com/arlQb.png import { Box, Button, Container, Stack, Typography } from "@mui/material"; import React from "react"; import DownloadButton from "../components/Buttons/DownloadButton"; ...

reactjsmaterial-ui

What is the proper way to transfer inputProps for a material-ui TextField Input to a styled-components element?

I am currently using material-ui's TextField element and have applied some custom styles to it: import TextField from "@mui/material/TextField"; const inputStyle = { fontSize: 24, pl: 2, pt: 0.5, pb: 0.5, }; <TextField variant ...

reactjsmaterial-uistyled-components