Tips for setting background colors as a prop for Material UI cards in React JS

Currently utilizing the Material UI next framework to construct a wrapper for the card component. This customized wrapper allows for personalization of the component. I have successfully extended the component so that the title and image within the card can be passed as props. However, I am facing a challenge in sending the background color as a prop since it is injected into the classes attribute using JS in CSS technique.

The styles defined with JSS are as follows:

    const styles = {
      card: {
             maxWidth: 345,
             backgroundColor: '#hexcodehere'
      },

The structure of the component is displayed below:

    const { classes,label } = props;        
    <Card className={classes.card}
      label={label}
    >
      <CardText />
      <CardMedia />
    </Card>

Any ideas on how to set the background color using props would be much appreciated!

javascriptcssreactjsmaterial-uijss

Answer №1

To enhance the styling of a React component, utilize the classnames package.

import classnames from 'classnames';

const { classes, label, backgroundColor } = props;  
<Card className={classnames(classes.card)} style={{ backgroundColor }}
   label={label}
>
  <CardText />
  <CardMedia />
</Card>

The value for the backgroundColor prop can be any valid CSS color string. For example:

  • '#f0f' (#rgb)
  • '#ff00ff' (#rrggbb)
  • 'rgb(255, 0, 255)'
  • 'rgba(255, 255, 255, 1.0)'

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

Using jQuery to dynamically add a class to elements that have tab focus

I want to apply a css class to elements that are focused by the tab key, without adding the class when focused by a mouse click. I have managed to achieve this using jQuery with the focusin and focusout events. Here is the code that I currently have: $( ...

javascriptjqueryasp.net

swapping the final word in a string with Node.js or JavaScript

var str = "Demo Docs Version 1.0.1"; var gotWord = str.split(" ").splice(-1)[0] str = str.replace(gotWord, "testing"); console.log(str); If there is a space between words, I can replace the last word. But how do I replace the last word when ...

javascriptnode.js

Issues with UA PhoneGap 2.0 plugin failing to initialize properly on iOS device

In my attempt to integrate push notifications into my iOS PhoneGap 2.0 app using the recently released Urban Airship plugin, I encountered an issue. Everything functions perfectly when I load the index.html from the provided sample application into my proj ...

javascriptiosobjectcordovaurbanairship.com

Unable to invoke a function in TypeScript from a Kendo template within the Kendo TreeList component

In my TypeScript file for class A, I am encountering an issue with the Kendo TreeList code. I am trying to call a function from the Kendo template. export class A{ drillDownDataSource: any; constructor() { this.GetStatutoryIncomeGrid ...

javascriptjquery.nettypescriptkendo-ui

The mobile navigation bar may not display correctly on certain iPhones and iPads

Currently using a custom theme on Prestashop 1.6 where minor changes have been made to the CSS file, focusing mostly on colors and fonts. Interestingly, the mobile menu functions flawlessly on Android devices that were tested. However, some Apple devices s ...

cssiphoneipadmenuprestashop

convert JSON to Java object using GSON with a map

Here is the structure of my Java POJO: public class MyPersonTO{ String name; String surname; Map<String, Double> categories; } Currently, I am using the Gson library, but I'm uncertain about the formatting of my JSON string and the obje ...

javascriptjsongson

How can I set up a cycling image background for the main div and a floating menu?

I was wondering how I could keep a cycling image background stationary behind the main content while scrolling through the page. You can check out the project itself by following this link. Feel free to use any of the code, including the fixed header menu, ...

jqueryhtmlcssbackground-image

JavaScript tip: Finding the total sum of strings with time format (e.g. 00:00:00)

I have an array that contains time values: // hours, minutes, seconds let arr = ["00:00:30", "00:20:00", "01:00:10", "05:10:15"] Is there a way to calculate the total sum of these elements? output: "06:30:55" ...

javascripttime

One method of extracting an object from an array using a parameter function is by utilizing the following approach

I am searching for a specific object in an array based on the user-provided ID. var laptops = [{ "name": "Firefox", "age": 30, "id": "ab" }, { "name": "Google", "age": 35, "id": "cd", "date": "00.02.1990" }, { "na ...

javascriptangulartypescript

Extract the email address from the HTML source code obtained through a GET AJAX request

An interesting scenario arises when the following code is executed from www.example.com. It fetches the complete html source code of www.example.com/example.html and displays it in an alert message. function process(){ url = "http://www.example.com/ex ...

javascriptajaxparsingget

Comparing boolean values in React JS

I am working with a React JavaScript code in which I am iterating through a series of boolean values. The issue I am facing is that when 'data.nextrow' is false, I expect nextrow1 to also be false but it ends up being set to true instead. co ...

javascriptreactjs

Tips for displaying a horizontal scrollbar on a div within a div that has a hidden scrollbar

To ensure that a horizontal scrollbar is displayed on my "content" div when the screen size is smaller than the specified minimum width, I have set the overflow-x property of the parent "container" to hidden. This prevents the scroll from appearing across ...

htmlcssbootstrap-4

Shifting Icon to the Right within the Drawer Navigator Toolbar

While modifying the example code for Material UI's drawer navigator, I decided to enhance it by adding a notification icon and a checkout icon with the Admin Panel typography in the toolbar. However, I encountered an issue where the checkout icon app ...

javascripthtmlcssreactjsmaterial-ui

What are the steps to add code into the Monaco Editor using Playwright?

As I explore the world of Playwright, I am faced with a challenge regarding testing a feature that involves a monaco editor. Unfortunately, my search in Playwright documentation and forums did not yield any relevant information. Here is the test scenario ...

javascripttypescriptplaywrightplaywright-test

Issue with AngularJS pagination: unable to detect the current page number

I am currently developing a compact application that showcases a JSON object of "users" in an HTML5 table. The application is built using Bootstrap 3 and AngularJS, and I have the intention to implement pagination for this table. Instead of having an arra ...

javascripthtmlangularjsjson

Get the JSON array by decoding the JSON data in PHP

I have a JavaScript function that creates a JSON array and uses an AJAX post method. How should this JSON array be decoded on the PHP side? Here is my JavaScript function: var invoices = {invoice: [{ "customerName" : "John" ,"reciptionName" : "Doe" ,"dat ...

javascriptphpjsonajax

AngularJs Http Status Code Generator工場

I am diving into the world of AngularJs and have developed a basic factory using $http get to fetch a .json file containing various HTTP status code numbers as keys, paired with their respective messages. However, I keep encountering the following error: ...

javascriptangularjsjson

Error: The hyperlink in the response from the Ajax request is not functioning as expected

I've exhausted all the suggestions for fixing this issue, but nothing has worked so far. Currently, my setup involves making an AJAX call to a PHP page called livesearch.php from the index page in order to retrieve live search results. <html> ...

javascriptphpjqueryhtmlajax

Is it possible to retrieve a background-size value of 'auto' using jQuery, JavaScript, or CSS methods?

Just imagine background-size: 50% auto; If I desire to capture the "auto" value, is there a way for me to determine the new height or width? ...

jquerycssjquery-ui

Is it feasible to select the last child of an input without having to specify the submit

Here is a portion of the HTML code I am currently testing: <form action="#" method="post> <input name="username" type="text" placeholder="Username" /><br /> <input name="password" type="password" placeholder="Password" />&l ...

htmlcssforms