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

Displaying the number of tasks completed compared to the total number of tasks within a JavaScript ToDo list

Currently, I'm in the process of creating a basic ToDo list using HTML, JS, and CSS. The last task on my list is to display to the user the total number of tasks and how many have been completed. For instance, if there are 3 completed tasks out of 7 i ...

javascripthtmlcss

Using jQuery, wrap two specific HTML elements together

I am working with a set of elements: <div id="one">ONE</div> <div id="two">TWO</div> <div id="three">THREE</div> <div id="four">FOUR</div> <div id="five">FIVE</div> My goal is to wrap a DIV tag ...

jqueryhtmlcss

Perfectly Positioned Overlay and Text on Top of an Inline SVG Element

Within my inline SVG code, there are circular icons representing different user progress stages, each customized with CSS styling. The SVG contains 5 stages of progress in total and is utilized within an Angular app. For any active stage, a corresponding ...

htmlcssangularjssvg

Struggling with showcasing Trips in my React Native project and looking for guidance on the best approach to implement it beautifully

API: app.get('/trip', async (req, res) => { try { const employeeId = req.query.user; const empId = new ObjectID(employeeId); // Retrieving Fleet associated with the driver's ID const fleet = await Fleet.findOne({ a ...

javascriptnode.jsreactjsreact-nativeexpress

Ways to expand the width of a div on hover - Angular navbar dropdown utilizing Bootstrap 4

I am attempting to make the div full width while also implementing a slideDown/Up effect. I am struggling to identify the specific CSS needed to adjust the width accordingly. Currently, this is what I have: I can see that the class open is dynamically ad ...

csstwitter-bootstrapbootstrap-4

Looking to streamline this intricate grid/table structure with the help of Twitter Bootstrap

I've been experimenting with creating a complex layout using tables in Twitter Bootstrap, but I'm struggling to get it just right – especially when it comes to displaying the number 5! Is there a way to achieve the same layout using divs instea ...

htmlcsstwitter-bootstrap-3

Bootstrap 4 radio buttons are not aligning properly with the padding

There seems to be an issue with the alignment of Bootstrap 4 custom radio buttons and my left padding. Here is a snippet: https://i.sstatic.net/vWTNo.png This is part of the code for displaying an item <div class="p-4"> <ul class="d-flex ...

htmlcssbootstrap-4radio-button

What is the best way to show HTML code on a REACT website without disrupting the existing styles?

I am trying to showcase the following code in a REACT webpage, but it is not displaying as code. Instead, it is showing as actual elements. How can I display the button codes below as actual code? <code> <pre> <Button className='btn-grv ...

htmlcssreactjs

Integrate 2Checkut Checkout (which securely accepts payments hosted by Verifone) with Node.js and React for seamless payment processing

Can anyone provide guidance on integrating 2checkout into a Node.js application? I've set up and activated my account, but I'm having trouble finding clear information in their documentation. Specifically, I need to be able to create subscription ...

node.jsreactjs2checkout

Is there a way to smoothly transition to the starting index of a LazyColumn when utilizing SnapFlingBehavior in Jetpack Compose?

Hey there, I've got a fascinating question to discuss about snapping in Compose development. With the introduction of snapping as a 1st class API for LazyColumn, replacing the Snapper library, a new query has emerged. How can one initialize the LazyCo ...

androidkotlinmaterial-uiandroid-jetpack-compose

The ID data from my axios.delete request is not properly transferring to the req.body, causing issues with deleting from mySQL

Currently, I am utilizing Axios to manage the requests in my application. Upon testing with PostMan, it has been confirmed that my DELETE request is functioning properly. However, when implementing the code for the front end, I encountered a 404 error duri ...

javascriptnode.jsreactjsexpressaxios

What is the best way to align two elements side by side using flexbox?

After trying to find a solution on this site without success, I realized that my situation is quite unique. I need to avoid changing the HTML code, minimize the use of classes, and refrain from using IDs. The current HTML structure I am working with inclu ...

htmlcssflexbox

Organize and display a list of contacts alphabetically by the first letter of their

I have a list of contacts that I need help with. Despite searching on Stack Overflow, I couldn't find the answer. Can someone please assist? Thank you. export const rows = [ { id: 1, name: 'Snow', email: 'Jon', co ...

javascriptreactjstypescript

Ensure that the div element spans the entire width of the screen

Having issues working with the div tag and encountering this problem: The left side doesn't extend as far as the right side, despite testing in multiple browsers. Here is the HTML code being used: <!DOCTYPE html> <html lang="en"> <h ...

htmlcss

Is there a way to convert a nested JSON object into an array in Spring boot?

Currently in the process of developing a React/Springboot app and facing an issue where I need to retrieve a single object from an Array. However, it seems that objects are not recognized in react. Wondering if anyone has a solution for extracting data fro ...

javajsonreactjsspring-bootapi

Prevent the text within the textarea from wrapping onto the next line

My challenge involves a textarea where text overflows onto the next line when it exceeds the maximum characters. However, I want the text to continue on the same line with a scroll bar for better visibility. Here's an illustration: text here flows on ...

htmlcss

Unable to access the suggestion list within the modal

I incorporate the PrimeNG AutoComplete feature within a PrimeNG Dialog, displaying a list of elements below the AutoComplete in the dialog. My objectives are: To set the max-height of the modal dialog to 300, and have a visible scrollbar if the total ...

javascripthtmlcssangularprimeng

Achieved anchoring an object to the top of the page while scrolling

Recently, I've been working on a piece of code to keep my div fixed at the top of the page while scrolling. However, it doesn't seem to be functioning as intended. Would anyone be able to point out where I might have gone wrong? The element in ...

javascriptjqueryhtmlcss

Utilizing the after pseudo element for an active selector in CSS

I'm struggling to make an active icon selector work with the after pseudo element. Here is the code I have attempted: <html> <head> <style type="text/css"> .btn{ width:25%; } .name{ background: #fff; color: #000; text-alig ...

htmlcsscss-selectorspseudo-element

Switching Languages in react-simple-keyboard: Explained

import React, { useRef, useState } from "react"; import Keyboard from "react-simple-keyboard"; import "react-simple-keyboard/build/css/index.css"; function App() { const [input, setInput] = useState(""); const [ ...

javascriptreactjsreact-simple-keyboard