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

Revamp the website's design

I am looking to revamp the color theme of my website with just a click of a button. Can someone provide me with a link to a reference website where I can get some inspiration? ...

javascriptcssajax

Exploring the powerful capabilities of utilizing state variables within styled components

I'm attempting to create a button that changes its state based on the value of a property within an object. Below is the styled component const Btn = styled.button` border-radius: ${props => props.theme.radius}; padding:5px 10px; backgroun ...

javascriptreactjsstyled-components

React error: Unable to iterate through items because property 'forEach' is undefined

I am trying to implement private routing validation using the following code: import React from 'react'; import { Route, Redirect } from 'react-router-dom'; import routes from '../../routing/routes'; export default function ...

javascriptreactjs

How can we determine if the return value from Object.values is an array or not, since it returns a JavaScript array without the brackets?

In my programming code, I work with two separate JSON files. I iterate through each item in the first file and compare its values with those in the second file. Based on the comparison results, I generate a third JSON file which essentially merges the cont ...

javascriptarraysjson

Hovering into Transition Time

My article card has a transition on the top attribute of the info div, which is supposed to be smooth and last for 0.3 seconds. However, the description suddenly appears during this transition. I'm trying to figure out why this is happening and how to ...

javascripthtmlcsscss-selectorscss-transitions

Using vue.js to sort comments based on the highest number of votes

Can someone guide me on sorting data (comments) based on the number of votes using vue.js? Much appreciated! data: { comments: [{ title: "Excellent blog post!", votes: 5 }, { title: "Interactive commenting feature in VueJ ...

javascriptvue.js

At times, the AngularJS directive may not be invoked

Here is my custom directive: ppm.directive('focusMe', function($timeout) { return { link: function(scope, element, attrs) { scope.$watch(attrs.focusMe, function(value) { if(value === true) { console.log(& ...

javascripthtmlangularjsangularjs-directive

Error TS2339 encountered in ngx-uploader: There is no property called 'lastModifiedDate' on the type 'File'

An issue has arisen in the code at node_modules/ngx-uploader/src/ngx-uploader/classes/ngx-uploader.class.ts(112,32): error TS2339: Property 'lastModifiedDate' is not found on type 'File'. Encountered this error while updating my An ...

javascriptangularnpmangular-clingx-uploader

Customize the font style of TextField

I'm trying to customize the font for a TextField component in my project using @material-ui. Below is the code snippet for the TextField: <TextField id="outlined-basic" className={classes.inputField} hintText="Level Data" ...

reactjsinputfontsmaterial-ui

The JSON POST Method is not allowed for a Self-Hosted WCF REST service

After encountering countless "WCF" questions online, I am starting to believe that finding a solution is nearly impossible. Can someone prove me wrong? My current situation involves working with a Self Hosted WCF Service where endpoints are defined progra ...

javascriptc#jqueryjsonwcf

Function not currently in operation

There seems to be an issue with the script not running or returning any answers. The console is blank. I am attempting to retrieve an answer from the Yandex Translate site (https://tech.yandex.com/translate/doc/dg/reference/translate-docpage/) Code: http: ...

javascriptangularjsapiyandexyandex-api

Enhancing the Aesthetics of Your Online Experience

I am attempting to format an input text using a react app. The goal is for this component to receive a text input from props, undergo the necessary "translator" functions, and display the translated code on the right side. I want the new text const newInpu ...

reactjsprettier

Different ways to display an HTML page in a well by utilizing a div tag and jQuery from a side menu

Check out my Tutorial Page! Currently, I am working on a simple tutorial page utilizing bootstrap 3. My goal is to showcase the HTML file content within the well container on the right side of the page. However, I am facing challenges as I do not want to ...

jqueryhtmlcss

Executing two Ajax calls in ReactJS with different parameters can improve the efficiency of your

Why does the second Ajax call overwrite the first one, causing the results to be different each time I refresh it? In the first Ajax call, I have set tests: [], testsHistories: [] in the setState function. However, the second Ajax call only sets the stat ...

javascriptjqueryajaxreactjs

Background color set for only half of the div

Is it possible to achieve a design similar to this using CSS, with a Half-background color for a div? ...

htmlcssbootstrap-4

The URL in an AJAX request includes a repeating fragment due to a variable being passed within it

const templatePath = envVars.rootTemplateFolder + $(this).attr('link'); console.log("templatePath : ", templatePath); $.ajax({ method: "GET", url: templatePath, context: this, success : function(result){ ...

javascriptjqueryajaxurlrequest

Django Implementation of JavaScript Confirmation Dialogue

Currently working on a Django form that requires a confirm/cancel dialog upon submission. I've considered sending POST data from jQuery, but I'm curious if it's possible to integrate a JavaScript dialog as middleware instead? ...

javascriptjquerydjango

Does the color of <hr> tags in Bootstrap 5 look different?

Encountering a problem with Bootstrap 5 version where adding background-color to <hr> is not displaying accurately: Comparison using Bootstrap 4: https://i.sstatic.net/QIY0P.png Comparison using Bootstrap 5: https://i.sstatic.net/Drlow.png Despite ...

cssbootstrap-5

What is the best way to nest a div within a flexbox container?

I am attempting to create a div that is based on percentages, and I want to nest a div inside another. Specifically, I want the center (xyz div) to only take up 90% of the height of the content-div. My goal is for the "content" div to be responsive to 90% ...

htmlcss

Ways to disable mousewheel function in jQuery

I am trying to deactivate the mouse scroll in jQuery and successfully did so, however, I encountered this error message jquery.min.js:2 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See Thi ...

javascripthtmljquerycssmousewheel