What is the best way to customize the label of Material UI's Tab component?

Question

What is the best way to customize the label of Material UI's Tab component?

Is there a way to customize the text color inside the Tab component while still allowing it to change color when selected as an active Tab?

For example:

<Tabs centered onChange={handleChange} value={value} textColor={'secondary'} indicatorColor={'secondary'}>
    <Tab label={'Hello There'} style={{color: '#fff'}}/>
    <Tab label={'Hello There'} style={{color: '#fff'}}/>
    <Tab label={'Hello There'} style={{color: '#fff'}}/>
</Tabs>

The code above changes the text color but does not override the color when the Tab is active.

In addition, I am using styled-components for convenience.

css reactjs material-ui

Answer 1

Answer №1

To create a custom class for the label, utilize the makeStyles export from material-ui.

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

const useStyles = makeStyles({
  customLabelColor: {
    color: "#fff"
  }
});

export default function CustomApp() {
  const classes = useStyles();
  return (
    ...
    <Tab
      label={"Hello There"}
      classes={{
        textColorSecondary: classes.customLabelColor
      }}
    />
    ...
  );
}

Check out the CodeSandBox example link here: https://codesandbox.io/s/quirky-kowalevski-xzf7g?file=/src/App.js

For more ways to override the CSS for the Tab component, refer to this link.

In the same documentation, pay attention to the textColorSecondary rule name which is relevant if you are using textColor="secondary" on the parent component Tabs.

Answer 2

To create a custom class for the label, utilize the makeStyles export from material-ui.

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

const useStyles = makeStyles({
  customLabelColor: {
    color: "#fff"
  }
});

export default function CustomApp() {
  const classes = useStyles();
  return (
    ...
    <Tab
      label={"Hello There"}
      classes={{
        textColorSecondary: classes.customLabelColor
      }}
    />
    ...
  );
}

Check out the CodeSandBox example link here: https://codesandbox.io/s/quirky-kowalevski-xzf7g?file=/src/App.js

For more ways to override the CSS for the Tab component, refer to this link.

In the same documentation, pay attention to the textColorSecondary rule name which is relevant if you are using textColor="secondary" on the parent component Tabs.

What is the best way to customize the label of Material UI's Tab component?

Answer №1

Similar questions

My goal is to create a stylish form using bootstrap and CSS3

What is the best method for testing an npm package that has been delivered as a .tgz file in a React

What is the best way to transfer a UserID from State to a GET URL?

My website's logo is not appearing on the navigation bar in the HTML code

Tips on adjusting the size of a font icon using an inline element prior to the font being fully loaded

Distinguishing the switch function from the React switch operator (jsx, tsx)

Can anyone explain why my inner div's display is set to block and it is being pushed down when its parent div has

How can we combine Angular Gradients and CSS Webkit Gradients for a modern design

What is the best way to remove an input field in KeyboardDatePicker from Material UI?

There seems to be an issue with the parsing of the code - an unexpected token was encountered when a semicolon was expected. Can

I recently started learning Next.js and I'm interested in organizing my website with multiple page folders but still using a single dynamic route labeled as [id]

Pass theme-specific properties to components using a Theme provider from an external library

Opacity: When the value is set to 0, the element remains invisible even when hovered over

CSS: using syntax to target element by its unique identifier

The React Component is caught in a loop of continuous re-rendering and reloading

Receiving error messages about missing images in my React project

What is the best way to choose two <li> elements with multiple classes in my WordPress navigation menu?

Issue with function not returning a list of radio buttons in ReactJS using ReactBootstrap

How can we redirect using an OnClick event handler in React.js?

Issue with bouncing dropdown menu