Changing the color of tabs using inline styles in material ui does not seem to work

I am brand new to using material ui and have been attempting to alter the colors of the selected tab.

Currently, the color is a dark blue shade and I am aiming to change it to red.

I tried applying inline styles, but unfortunately, there was no change. Could you advise me on how to resolve this issue?

Below, I have shared my sandbox link and code snippet for reference:

https://codesandbox.io/s/yqj5q8v461

<Tabs
  value={value}
  onChange={this.handleChange}
  scrollable
  scrollButtons="on"
  indicatorColor="primary"
  textColor="primary"
>
  <Tab
   label="Search"
   icon={<PhoneIcon />}
   style={{ border: "red" }}
  />
  <Tab
   favorites={favorites}
   label="Favorites"
   icon={<FavoriteIcon />}
  />
</Tabs>
javascriptcssreactjsreduxmaterial-ui

Answer №1

You have the ability to customize tab styles using CSS API,

For instance:

<Tabs
  value={value}
  onChange={this.handleChange}
  scrollable
  scrollButtons="on"
  classes={{ indicator: classes.tabsIndicator }}
>
  <Tab
   label="Search"
   icon={<PhoneIcon />}
   classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
  />
  <Tab
   favorites={favorites}
   label="Favorites"
   icon={<FavoriteIcon />}
   classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
  />
</Tabs>

Subsequently, I have included specific styles like this:

const styles = theme => ({
  root: {
    flexGrow: 1,
    width: "100%",
    backgroundColor: theme.palette.background.paper
  },
  tabsIndicator: {
    backgroundColor: "red"
  },
  tabRoot: {
    "&:hover": {
      color: "red",
      opacity: 1
    },
    "&$tabSelected": {
      color: "red",
      fontWeight: theme.typography.fontWeightMedium
    },
    "&:focus": {
      color: "red"
    }
  },
  tabSelected: {}
});

Take a look at a working example based on your code: https://codesandbox.io/s/882o65xlyl

I trust this information will be beneficial to you

Answer №2

Give this a shot: border: '1px solid red'

Answer №3

If you're looking for a different design framework, I highly suggest trying out Ant Design.

For more information, you can visit their website here

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

Form a column containing both row object data and html code elements

I am in the process of creating a unique column within my table, allowing me to execute specific actions and generating HTML code based on the object defining the row. Being new to Angular, I believe I should utilize $compile, but I am unsure of how to pr ...

javascriptangularjsdatatablesangular-datatables

Having trouble capturing screenshots with PuppeteerJS?

I've encountered an issue while working with Puppeteer to capture screenshots from a provided URL. The code I have below doesn't seem to be functioning properly. It keeps showing the error message: [0] Error: Protocol error (Emulation.setDeviceM ...

javascriptnode.jsnext.jspuppeteer

Issue with material table not showing data

Problem I've been working on integrating a material design table into my project, but I'm running into an issue where the data isn't showing up. I followed the example provided here but all I see is a single vertical line on the page: Upon ...

javascriptangular

A Vue component library devoid of bundled dependencies or the need for compiling SCSS files

My current challenge involves the task of finding a way to publish our team's component library. These components are intended to be used by various internal applications within our organization. I have specific requirements: The library must be acc ...

javascripttypescriptvue.jsnpmvue-component

Running system commands using javascript/jquery

I have been running NodeJS files in the terminal using node filename.js, but now I am wondering if it is possible to execute this command directly from a JavaScript/jQuery script within an HTML page. If so, how can I achieve this? ...

javascriptjqueryhtml

Ways to position a DIV on the right side of the screen using percentage margin to adjust its distance from the edge as the browser is resized

Allow me to provide a clearer explanation here: Imagine an element placed on a webpage with a margin of 10% from the left side. When the size of the page is adjusted, the margin on the left decreases accordingly - for example, 10% from 1400px - 140px, and ...

htmlcssresponsive-design

Guide to retrieving information from an API and incorporating it into a fresh JSON structure

I am currently working on fetching data from an existing API endpoint and using a part of that data to create a new endpoint in Node.js with Express. Specifically, I am trying to retrieve the userId from https://jsonplaceholder.typicode.com/posts/1 and int ...

javascriptnode.jsapirestexpress

Are Viewmodel contents empty after ajax request?

Currently working on an ASP.NET MVC application, I am in the process of developing a search page that showcases both the search box and the table of results simultaneously. To achieve this functionality, I have utilized Partial Views along with AJAX/JSON c ...

javascriptc#jsonajaxasp.net-mvc

What is the best way to ensure that two Node processes do not insert duplicate database records when running concurrently?

My Lambda function receives a high volume of events simultaneously, causing AWS to spin up multiple instances to handle the load. The function written in Node.js uses Knex to interact with a Postgres database, checking if a record with a specific ID exists ...

javascriptnode.jspostgresqlaws-lambdaknex.js

Using ng-repeat with an AJAX-called JSON is not possible

I've been struggling with handling JSON data from an AJAX call and displaying it using ng-repeat. If you want to take a look at my code in a more organized way, I've shared it on http://jsfiddle.net/7quj9omw/. However, please note that the code ...

javascriptjsonangularjsangularjs-ng-repeationic-framework

Is there a way to update the input box value with a variable using jquery?

I am currently facing an issue with changing the value attribute of an input box in a form using jquery. Although I am able to change the value, it does not reflect in the outer html. Below is my current code snippet: $("a").click(function(event) { va ...

javascriptjqueryhtmlforms

What steps can be taken to troubleshoot issues with the jquery mask plugin?

I am using the jQuery Mask Plugin available at to apply masks to input fields on my website. Currently, I am trying to implement a mask that starts with +38 (0XX) XXX-XX-XX. However, I am facing an issue where instead of mandating a zero in some places, ...

javascriptjqueryjquery-plugins

Eliminate the empty space that separates the text from the border

I'm looking to adjust the spacing between my number and its top and bottom borders. https://i.stack.imgur.com/UYFpX.png Currently, the number takes up the full width but leaves empty space above and below it. Any suggestions on how I can make it fi ...

htmlcss

Error: The fetch request was unsuccessful [NextJS API]

I keep encountering an error - TypeError: fetch failed after waiting for 300 seconds while requesting an optimization server that requires a response time longer than 300 seconds. The request is being sent from the provided API in NextJS. Is there a way ...

javascriptnext.jsfetch-api

Steps for integrating Stanford's NLP into a web application

I have successfully developed a project utilizing Stanford's NLP API and models. Now, I am looking to integrate this Java-based project onto the web. After seeing the demo provided by Stanford-NLP, I am curious about the process they use to achieve th ...

javascriptjavaajaxstanford-nlp

Detach attention from TextField select component in Material UI and React through manual means

When I create a select input using the TextField component from Material-UI library, I need to manually remove focus after an option is selected. I attempted to achieve this by using a reference to the TextField with the 'inputRef' prop. However, ...

javascriptreactjsmaterial-ui

What are the steps to effectively create a cascade of Q promises?

Consider the following scenario as an illustration: I have 3 URLs stored in an array called "urls" The "require" function returns a promise that performs an $http call The code provided is functional, but it doesn't meet my desired outcome since th ...

javascriptangularjspromiseqdeferred

Navigate through intricate JSON structure

Struggling with a highly complex JSON object, I am trying to list out all the properties and keys exactly as they are. While I have grasped the concept, I am having trouble with the execution. Every time the object contains another object, I need to call ...

javascriptjqueryjsonloops

Integrate user interface functionality within the server component in NextJS

When considering the Server Component located in the new app/ directory within NextJS: export default async function RootLayout({ children }) { const categories = await getCategories(); // const [navigation, setNavigation] = React.useState('hidde ...

javascriptreactjsnext.jsserver-side-renderingnext.js13

The svh/lvh units are experiencing unexpected issues when using Chrome on an iPhone

I'm facing an issue with my hero section that is supposed to take up the full height of the viewport. I recently tried using the new svh/lvh units, which seemed to work fine on desktop and Safari for mobile. However, when testing on Chrome for mobile ...

cssnext.jsmobilematerial-uiviewport