Customize tab background color in Material-UI by utilizing a styledTab component with a passed prop

I've customized this tab to have my desired style:

import { withStyles } from "@material-ui/core/styles";

const StyledTab = withStyles((theme) => ({
  root: {
    backgroundColor: "yellow",
  },
}))((props) => {
  const { shouldSetBackgroundColorToOrange } = props;
  return <Tab {...props} />;
});

Here is how it's implemented:

<StyledTab label={"Room"} shouldSetBackgroundColorToOrange={true} />;

I want to change its color to orange depending on the value of the shouldSetBackgroundColorToOrange prop.

Unfortunately, I haven't been able to figure out a way to achieve this.

cssreactjsmaterial-uimern

Answer №1

Take a look at the code snippet provided below, which is also available for testing in this live sandbox environment

You can easily integrate this button functionality into your own code by following the example

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

interface styleProps {
  shouldSetBackgroundColorToOrange: boolean;
}

const useStyles = makeStyles((theme) =>
  createStyles({
    root: {
      backgroundColor: ({shouldSetBackgroundColorToOrange}: styleProps) =>
        shouldSetBackgroundColorToOrange ? "orange" : "yellow"
    }
  })
);

function TestComponent() {
  const classes = useStyles({ shouldSetBackgroundColorToOrange: true });
  return (
    <Button variant="contained" className={classes.root}>
     Button
    </Button>
  );
}

export default TestComponent;

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

Unable to extract the 'id' property from 'params' object in Next.js 13.4 due to its undefined value

I am currently trying to retrieve the [id] URL parameter in Next.js 13.4, but I keep encountering an error stating that params is undefined. Despite extensive online research and seeking assistance from ChatGPT, all I could find were examples for older ve ...

javascriptreactjsnext.js

What is the most effective method for incorporating CSS using Javascript to target a specific aria-label attribute?

Is there a way to add a CSS property to a specific tag with a particular aria-label on document load? My goal is to change the flex order of a section to 2. I need help using JavaScript to target the aria-label 'block 1' so I can set the order t ...

javascriptcsstwittertampermonkey

I'm facing an issue with SSRProvider in my NextJs application

My application is developed using NextJs and Typescript, utilizing the react-bootstrap library for creating components. I am facing an issue where I keep receiving an error message stating that When server rendering, you must wrap your application in an &l ...

javascriptreactjstypescriptnext.js

Enhancing React components with Hooks and markers

I'm facing a syntax uncertainty regarding how to update React state using hooks in two specific scenarios. 1) I have a state named company and a form that populates it. In the contacts section, there are two fields for the company employee (name and ...

javascriptreactjsjsxreact-hooks

React Context failing to update when clicking on modal opening button

Currently, I am facing an issue where I am attempting to trigger a modal by updating the state of the component within a Context Provider. Despite the button registering a click successfully, the Modal fails to open. Below is the code snippet containing ...

reactjsreact-hooksstatereact-context

Determine if a material table row is currently in the editing state

I have incorporated the material-table from material-table into a material-ui Stepper, but I am facing an issue where users tend to click on the "next" button even when the table is still in edit mode, resulting in data loss. Is there a way for me to acce ...

reactjsmaterial-uimaterial-table

Centering divs using iPad media queries does not seem to work properly

While working on my website, I encountered an issue with displaying content properly on various mobile devices. I have implemented media queries for this purpose. Currently, on the main site, two divs (#wrap and #scrollbar) are positioned next to each oth ...

htmlcsscentermedia

Adjusting the text color based on the dynamically set background color

If I have a calendar where each entry has a unique background color assigned to it (one color per user), including both light and dark colors that users can choose from, how can I set the text color to match the background style? Where should I begin wit ...

phpjqueryhtmlcss

Setting up Angular Toolkit via npm installation

After successfully installing the UIKit npm package within an Angular 2 CLI project, what steps should I take to utilize it? I have also installed typings for UIKit (@types/uikit), but I am unsure of how to properly import the package into a controller i ...

cssangulartypescriptnpmuikit

Tips for creating asynchronous Redux actions in a genuine application

Summary: I am looking for an example of an asynchronous redux-thunk action that demonstrates how to make an async call (e.g. fetch) and trigger a state update. Additionally, I want to understand how to chain multiple such actions together, like checking if ...

reactjsreduxredux-thunk

Tips on how to modify a nested object within an array using Node.js and MongoDB?

Within my MongoDB database, the structure of my records appears as follows: [{ "_id": "", "courseTitle": "", "courseImage": "", "group": [ { "_id ...

node.jsreactjsmongodbexpresspostman

Tips for creating space between a label and radio button in Bootstrap 4

I attempted to use this solution as suggested, but unfortunately, it did not yield the desired results. I seek advice on how to achieve the intended outcome. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="s ...

htmlcssbootstrap-4radio-button

Having trouble accessing a React component class from a different component class

I just started learning reactjs and javascript. For a simple project, I'm working on creating a login and registration form. The issue I'm facing is that when a user enters their email and password and clicks 'register', instead of movi ...

javascriptreactjsauthentication

The timeouts persist in firing and running even after being cleared and the component has been unmounted

I am currently working on creating bus animations based on an array of coordinates. I am using setTimeout to trigger a function that moves the marker to the next coordinate. However, I am facing an issue where the functions continue to execute even after c ...

javascriptreactjsreact-nativesettimeoutsetinterval

How can we dynamically set input props based on the value of another prop state?

Looking to update inputProps in the textfield based on another prop. Here is an example: <TextField name={props.name} value={props.vals} inputProps={{autocapitalize:"characters", textTransform:"uppercase"}} onChange={props ...

reactjsmaterial-uiuitextfieldreact-props

How can I trigger a revalidation of a server component or page in NextJs v13.2 by utilizing an onClick event handler within the app directory?

Instead of automatically revalidating every 5 seconds with revalidate: 5, I would like to trigger the revalidation using an onClick event handler on the frontend ui react component. ...

reactjsnext.jsserver-side-rendering

What is the process for transforming the search bar into an icon located at the top of a WordPress site?

For the past few weeks, I've been attempting to convert the search bar on my website (which is currently a plugin) into an icon positioned near the header. I've experimented with modifying the child theme's functions.php, the parent theme&a ...

phpcsswordpress

Looking for a reliable date and time picker for Material-UI version 5 in ReactJS. Can anyone recommend one?

I am looking to integrate a datetime picker into my ReactJS app that is based on Material-UI V5. After consulting the documentation, I found the recommendation to install @mui/x-date-pickers However, when attempting to do so, an error occurs: node@62 ...

reactjsdatetimematerial-ui

Discover the mistake during the creation of the next.js application build

Trying to build my next.js file, but encountering an error: ./pages/city/[city].js 21:20 Error: React Hook "useRouter" is called in function "city" that is neither a React function component nor a custom React Hook function. React ...

reactjsnext.js

Styling a class doesn't have any effect - NextJS

Currently, I am immersing myself in learning NextJS and have chosen to work with a straightforward weather API that gathers data from a specified city. The new concepts I've been picking up are quite intriguing and I'm really enjoying the process ...

reactjsnext.js