Utilizing multiple class names in Material UI with identical definitions

When working with traditional CSS, it is common to define shared properties between classes like this:

.classA,.classB{
  background-color: black;
}

In Material UI and using theming, the equivalent would be:

styles = (theme)=>({
    classA:{
      backgroundColor: 'black'
    },
    classB:{
      backgroundColor: 'black'
    },    
})

I am curious if there is a way to streamline the code in the material UI approach above, possibly defining both classes simultaneously. Is there a syntax that allows for something like this (in pseudocode)?:

styles = (theme)=>({
    classA,classB:{
      backgroundColor: 'black'
    }, 
})

Answer №1

Is there a reason you haven't considered creating a base class for the color scheme?

blackBg: {
  backgroundColor: 'black'
}

You can then utilize the classnames library to apply multiple classes to your element.

import classNames from 'classnames'

...
  <div className={classNames(blackBg, myOtherClass)} />
...

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

What is the best way to output multiple Div elements using Jquery or Javascript?

I have the following HTML code snippet: <div id="box"> <div id="id_1></div> <div id="id_2></div> <div id="id_3></div> <div id="id_4></div> </div> Can someone guide me on how to use Jquery or ...

Styling the navigation menu for mobile devices

How can we transition from a menu like this : https://i.sstatic.net/qQ2k1.png to this when the screen size reaches a specific width: https://i.sstatic.net/AUM4v.png In essence, replacing certain texts with icons. Is pre-defining it and changing the dis ...

Steps for returning a res.send(req.body) upon sending back to a function

I'm currently working on sending the req.body from a POST request route back to the executing function for further processing. The structure of req.body is as follows: { username: 'aa', password: 'ss' } After making the post requ ...

Exploring the Impact of 2 HostBindings on Class Generation from Inputs in Angular 4

I'm struggling with the code in my component, which looks like this: @Component({ selector: "home", templateUrl: "./home.html" }) export class Home { constructor() {} @HostBinding("class") @Input() public type: string = "alert" @HostBindi ...

Prioritize moving the JavaScript onload handler to the end of the queue

I am looking to include a JavaScript file at the very end of footer.php using a WordPress plugin. I attempted to do this with the 'add_action' Hook, but found that it is adding the JavaScript code near the </body> tag. add_action('wp_ ...

NodeJS Socket not transmitting file after connection with client

Having scoured the depths of various resources, including SO and Google, I have hit a roadblock. I am struggling to understand why the socket is failing to capture the uploaded file via the form; it simply stops after connecting. When I check the console, ...

What is the best way to make the buttons on my website shift downwards?

I'm currently working on making my website mobile-friendly. I've managed to stack the buttons on top of each other when the width reaches 700, but now I'm struggling to make them move down the screen. Some resources suggest using absolute po ...

I am encountering an error message that states "Uncaught TypeError: Cannot read property 'use' of undefined."

https://i.sstatic.net/HcwYr.png Error: Unable to access the 'use' property of an undefined object ...

Issue with Passing 'key' Prop to React Component in a Mapped Iteration

https://i.sstatic.net/qeFKT.pngI'm struggling with adding a key prop to a React component in a mapped array within a Next.js project. The issue lies in a Slider component and an array of Image components being mapped. Even though I have provided a uni ...

Encountering an issue with Bootstrap and Sass when trying to convert SCSS files to CSS due to an error involving an undefined variable @each $color, $value in $theme-colors

I have a goal to reduce the size of the bootstrap file bootstrap.min.css. After some research, I discovered that utilizing SASS and then SCSS is an effective method to achieve this by importing only the specific components needed. Despite my previous exper ...

The setInterval function continues executing even after the page has been changed

I'm encountering an issue with my function where it continues to run even after the page has changed, resulting in an error. How can I go about stopping this behavior? Thank you! componentDidMount() { var current = 0; var slides = document.g ...

Tips for Updating HTML Table Content Dynamically Using JavaScript without jQuery

I am in the process of developing a web application that requires me to dynamically change the content of an HTML table based on user input, all without relying on jQuery or any other external libraries. Adding rows to the table is not an issue for me, but ...

Guide to stacking blocks on top of each other

How can I create even spacing between blocks of different heights? For instance, in the image below, you can see that block 2 should be positioned directly under block 1. https://i.stack.imgur.com/RnYbP.png https://i.stack.imgur.com/LHvlz.png ...

Vertical Alignment of Navigation Bar in Bootstrap 4

I am trying to align the center of my navigation bar using the "Cover" Bootstrap 4 template. Please find the current code provided below. <div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> <header class="masthead mb-auto"> ...

Obtain an indeterminate value from a variable

My situation involves a dynamic variable assigned from a service, requiring a real-time calculator to update another variable using its value. Below is the relevant code snippet: $scope.getSubTotalSCTax = function(){ TableService.checkOut('SubTo ...

Error: The variable 'err' is not declared in this scope.at line app.post

Tools I am Using Windows 10 Firebase (Firestore) Postman JavaScript, Express I'm learning from this video(https://www.youtube.com/watch?v=-vo7cu0xP4I) Situation Description I attempted to make a post request using Postman for testing purposes, b ...

What is the best way to attach an event again in jQuery?

My JavaScript/jQuery code initiates a listener to highlight DOM elements when a button is clicked. By clicking the button, the listener event starts (e.g. highlight : function()). If I click on any part of the webpage, the listener stops. However, if I ...

How can I create a table using a loop and an onclick function for each <td>?

I have written code to create a table in PHP using a loop. I want to add an onclick function to each cell so that when a particular cell is clicked, the background color changes. However, I am encountering an error. Am I doing something wrong? <head& ...

Tips on maintaining the parent's scope in CoffeeScript while making an AJAX call

I need to iterate through an object in CoffeeScript and make an AJAX call for each item in the object using jQuery. However, I'm facing an issue with losing the reference to the initial context in the callback function of the AJAX call. The context al ...

Ways to switch out event listener when button is deactivated

I find myself in a situation where I need to switch all unauthorized controls on my UI from a hidden state to a disabled state. Additionally, I want to add a tooltip with unauthorized text and have the control display this text when clicked. While I am ab ...