The chosen Material UI tab stands out with its distinct color compared to the other tabs

Just dipping my toes into the world of Material UI, so bear with me if this question sounds a bit amateur. I've been playing around with Material UI Tabs and successfully tweaked the CSS to fit my needs. Take a look below:

https://i.stack.imgur.com/BXTOA.png

However, I've run into an issue where the selected tab and the other tabs seem to have different opacity levels, even though they are technically the same color. Despite scouring online Material UI documentation, I can't seem to find a solution to make them consistent. I've tried various approaches like tweaking [TabIndicatorProps] or adding the snippet below to the Tabs class:

"&.Mui-selected": {
      color: "1D4659",
      opacity: "70%"
    }

Does anyone have any insights on how to address this? Ideally, I'd like to ensure that both the selected tab and the others maintain uniformity in appearance.

cssreactjsmaterial-uitabs

Answer №1

you have the option to replace MuiTab-root instead of Mui-selected.

1- define your personalized style

const useStyles = makeStyles({
  customTabs: {
    "& .MuiTab-root": {
      color: "#1D4659",
      opacity: "70%"
    }
  }
});

2- apply your specific style within <Tabs>

     const classes = useStyles();

     <Tabs
        classes={{ root: classes.customTabs }}
        ...
      >
       <Tab ... />
       <Tab ... />
       <Tab ... />
       <Tab ... />
       <Tab ... />
    </Tabs>

the code can be found here: https://codesandbox.io/s/gracious-framework-xo1cp?file=/src/App.js

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

Exploring React Native Expo: A guide on selecting multiple documents from a collection using Firebase queries

Currently, I am implementing Firebase to synchronize my pet listings on the application for display in the following format: (IMAGE) Name Breed Age Shelter https://i.stack.imgur.com/y7Rpr.png But I'm facing a challenge trying to code this out b ...

reactjsfirebasereact-nativegoogle-cloud-firestoreexpo

What exactly does Isomorphic rendering entail when it comes to ReactJS?

Javascript frameworks pose a challenge for Search Engine optimization as they create dynamic content that is not easily indexed. React addresses this issue with Isomorphic rendering. But what exactly does this concept entail and how does it differ from Ang ...

angularreactjsjavascript-framework

The `.populate()` function is malfunctioning in mongodb

As I work on developing an ecommerce application using Nextjs, one of the challenges I encountered involved populating the "reviewBy" property within an array of objects called "reviews". To tackle this issue, I attempted to populate the "reviewBy" proper ...

reactjsmongodbmongoosenext.js

Having issues with stripe payments in my ReactJS application

I've encountered an issue while attempting to process a credit card payment using Stripe. Here's the code snippet I'm currently working with: import StripeCheckout from "react-stripe-checkout" // import confirmPayment from 'st ...

node.jsreactjsstripe-paymentspaymentcard

Using Promise with setState in a functional component in ReactJS

export default function CustomComponent() { const [myValue, setMyValue] = useState(0); let myPromise = new Promise(function (resolve, reject) { setMyValue(1); setTimeout(function () { resolve(myValue); }, 3000); }); useEffect(() ...

reactjs

Ensuring the validity of input tags

I encountered an issue with an input tag that has a specific logic: https://codepen.io/ion-ciorba/pen/MWVWpmR In this case, I have a minimum value retrieved from the database (400), and while the logic is sound, the user experience with the component lea ...

javascripthtmljquerycss

Modify an element upon clicking the mouse on an image

I am looking to dynamically change the paragraph element with className="details" to an editable input field when a user clicks on the image with className="edit-icon" within the same grid container. How can I achieve this functionality ...

javascripthtmlreactjsmaterial-ui

Using a HTML value as an argument in a React component

Can someone help me figure out how to pass an HTML value as a parameter for my function? Here is the code snippet I have: <input type ="text" placeholder="Smart Contract Bytecode" name="name" id ="scbytecode" className="nice-textbox"/> <button i ...

htmlreactjsparameters

An unexpected { token error was encountered by Jest while running a React application

I am facing a persistent issue that I just can't seem to resolve. Despite trying numerous solutions found online, nothing seems to fix it. Below are the configurations: package.json { "scripts": { "test": "jest --no-cache", ...

javascriptreactjsjestjsbabeljsbabel-jest

Is there a way to validate both email and mobile number in just one input field?

https://i.stack.imgur.com/Caqmr.png Looking for advice on using React Hook Form to validate my form. Any suggestions? ...

reactjsmaterial-uireact-hook-form

What is the best way to assign a unique ID to every element in this situation?

Here is the given code: var words = ['ac', 'bd', 'bf', 'uy', 'ca']; document.getElementById("wordTable").innerHTML = arr2tbl(2); function arr2tbl(ncols) { return words.reduce((a, c, i) => { ...

javascripthtmlcss

The MUI DatePicker is appearing below the MUI drawer element

I am facing an issue with my MUI DatePicker component which is placed inside an MUI drawer component. Whenever I click on the date picker to open the calendar popup, it ends up rendering below the drawer. https://i.stack.imgur.com/wONwl.png I attempted ...

reactjsmaterial-ui

When utilizing the navigation.navigate function, react-navigation v6.0 may present an error message

The Challenge I'm Dealing With One issue I encountered is when I use navigation.navigate('XXXPage'), react-navigation version 6.0 displays the following error message. Argument of type 'string' is not assignable to parameter of ty ...

reactjstypescriptreact-nativereact-navigation

How to Customize the Menu Style in Your WordPress Theme

As a newcomer to Wordpress theme development, I am struggling to properly style my navigation menu. Below is the raw HTML code I have: <!-- Navigation --> <nav class="navbar navbar-default navbar-custom navbar-fixed-top"> <div cl ...

csswordpressmenuthemes

Why does the API in Next Js get triggered multiple times instead of just once, even when the strict mode is set to false?

React Query Issue I am currently facing an issue with React Query where the API is being triggered multiple times instead of just once when the selectedAmc value changes. I have tried setting strict mode to false in next.config.js, but that didn't so ...

javascriptreactjsnext.jsreact-query

focusing on a specific category within a CSS identifier

My goal is to specifically target the class .page-has-children within this code snippet: <div id="dc_jqverticalmegamenu_widget-2" class="widget sidebarwidget "> <div class="dcjq-vertical-mega-menu" id="dc_jqverticalmegamenu_widget-2-item"> ...

csswordpress

Modify the Text Displayed in Static Date and Time Picker Material-UI

Looking to update the title text on the StaticDateTimePicker component? Check out this image for guidance. In the DOM, you'll find it as shown in this image. Referring to the API documentation, I learned that I need to work with components: Toolbar ...

javascriptreactjstypescriptmaterial-ui

Select component with nested checkboxes for multilevel dropdown

I am interested in developing nested dropdowns with checkboxes, similar to the example shown in this image: Image 1 Is there a way to achieve this functionality using React? I have not been able to find any specific library that allows for this implement ...

javascriptreactjsmaterial-ui

The implementation of user context failed to meet expectations in terms of writing

I need some clarification regarding userContext in react with typescript. Initially, I define it in RubroContext.tsx import { createContext, useContext } from "react"; import { RubroType1, RubroType2 } from "../Interfaces/interfaces"; ...

reactjstypescriptreact-hooks

Seamless animated loading gif as a looping background visual

Is there a way to find a GIF that can be used as a repeated background on an HTML element, creating the illusion of a seamless block? https://i.sstatic.net/5BKxW.gif (source: opengraphicdesign.com) I am looking for an 80x80 GIF that can be repeated as ...

cssanimated-gif