Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Tabs] Active tab cannon be seen when child of AppBar

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

Without changing the default theme, the text color of an active tab is the same as its background color, which makes it invisible. Other (non-active) tabs are displayed as expected.

Note: before upgrading to material v5 there was no issue.

Expected behavior 🤔

By default the text color of the active tab should be different than its background color.

Steps to reproduce 🕹

Steps:

Define a Tabs with 2 Tabs under an AppBar
Make sure one of the tabs is activated. –> the active tab text cannot be seen

Minimum reproduction: https://codesandbox.io/s/mui-v5-forked-gkx3v?file=/src/App.tsx

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Issue Analytics

State:
Created 2 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

abhinav-22-techcommented, Dec 27, 2021

@Metheny80 Please check v4 docs https://v4.mui.com/components/tabs/#simple-tabs in this default color is white but in v5 https://mui.com/components/tabs/#basic-tabs default color is blue. You can customize it according to your requirements.

0reactions

mbrookescommented, Dec 29, 2021

Top Results From Across the Web

[Tabs] Active tab cannon be seen when child of AppBar #30394

Without changing the default theme, the text color of an active tab is the same as its background color, which makes it invisible....

Work with tabs - Flutter documentation

Working with tabs is a common pattern in apps that follow the Material Design guidelines. Flutter includes a convenient way to create tab...

Flutter Appbar (actions) with child tabs - dart - Stack Overflow

I found the solution by making my parent widget as an InheritedWidget so I can access to it's data from child. Here's an...

How to Implement Tabs With AppBar in Flutter - YouTube

Learn How to Implement Tab along with Tabbar in Flutter at the bottom of the AppBar. Working with tabs is a common pattern...

Flutter Boring Tab to Cool Tab - Medium

First, we need to create a basic tab. In here I used DefaultTabController.You can assign DefaultTabController to a home parameter of the MaterialApp...