What is the best way to add custom styles to Material UI tabs in a React application?

I need help styling my material UI tabs within a react component. I am having trouble getting the styles applied correctly, specifically setting the background color and box shadow of the entire bar, as well as defining the indicator background color and underline for the active tab. Any guidance would be appreciated!

Here is my current code snippet:

const routes = ["/tab1", "/tab2"];
  
function MainNavigation() {
  const styles = {
      backgroundColor: "white",
      boxShadow: '0 2px 2px -2px rgba(0,0,0,.2)'
  };

  return (
   <IonToolbar >
      <BrowserRouter >
        <Route
          path="/"
          render={(history) => (
            <div className="toolbar">
              <Tabs 
              TabIndicatorProps={{style: {background:'primary'}}}
              indicatorColor="primary"
              color="primary"
              variant="scrollable"
              scrollButtons="auto"
              aria-label="scrollable auto tabs"
              value={history.location.pathname !== "/" ? history.location.pathname : false}
                  >
                <Tab className="mat-tab"
                  label="Tab1"
                  value={routes[1]}
                  component={Link}
                  to={routes[1]}
                ></Tab>
                <Tab className="mat-tab"
                  label="Tab2"
                  value={routes[0]}
                  component={Link}
                  to={routes[0]}
                ></Tab>
              </Tabs>
             </div>
          )}
        ></Route>
 
        <Switch >
          <Route path="/scutes" component={Tab2}></Route>
          <Route path="/gateways" component={Tab1}></Route>
          <Redirect exact from="/" to="/tab2" />
        </Switch>
      </BrowserRouter>
      </IonToolbar>
  );
}

export default MainNavigation;
function handleTabChange(index: any) {
  throw new Error("Function not implemented.");
}

Answer №1

  • Bring in styled component
import styled from "styled-components";
  • Define your custom styles
const NewTab = styled(Tab)`
   font-size: 100px;
`
  • Replace default Tab with the new element
import styled from "styled-components";

const routes = ["/tab1", "/tab2"];

const NewTab = styled(Tab)`
   font-size: 100px;
`
  
function MainNavigation() {
  const styles = {
      backgroundColor: "white",
      boxShadow: '0 2px 2px -2px rgba(0,0,0,.2)'
  };

  return (
   <IonToolbar >
      <BrowserRouter >
        <Route
          path="/"
          render={(history) => (
            <div className="toolbar">
              <Tabs 
              TabIndicatorProps={{style: {background:'primary'}}}
              indicatorColor="primary"
              color="primary"
              variant="scrollable"
              scrollButtons="auto"
              aria-label="scrollable auto tabs"
              value={history.location.pathname !== "/" ? history.location.pathname : false}
                  >
                <NewTab className="mat-tab"
                  label="Tab1"
                  value={routes[1]}
                  component={Link}
                  to={routes[1]}
                ></NewTab>
                <NewTab className="mat-tab"
                  label="Tab2"
                  value={routes[0]}
                  component={Link}
                  to={routes[0]}
                ></NewTab>
              </Tabs>
             </div>
          )}
        ></Route>
 
        <Switch >
          <Route path="/scutes" component={Tab2}></Route>
          <Route path="/gateways" component={Tab1}></Route>
          <Redirect exact from="/" to="/tab2" />
        </Switch>
      </BrowserRouter>
      </IonToolbar>
  );
}

export default MainNavigation;
function handleTabChange(index: any) {
  throw new Error("Function not implemented.");
}

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

Tips for showing and modifying value in SelectField component in React Native

At the moment, I have two select fields for Language and Currency. Both of these fields are populated dynamically with values, but now I need to update the selected value upon changing it and pressing a button that triggers an onClick function to update th ...

After successfully deploying on Netlify, ReactDOM.createRoot() does not insert the #root div

Currently experiencing an issue while attempting to deploy a React application on Netlify. The app functions correctly in the local environment, and the deployment process completes without errors. However, upon previewing the site, the <App> compone ...

When you print, transfer HTML tags to a separate page

I need help with writing a report that pulls data from a dynamic database. I added code to force a page break after every second div tag, but since the content is constantly changing, some div tags end up spanning across pages when printed. Is there a way ...

Retrieving queries from a sibling component using react-query: A step-by-step guide

I have a question regarding how to refetch a query from another sibling component using react-query. Let's consider Component A: import {useQuery} from "react-query"; function ComponentA(){ const fetchData = async () => data //re ...

How can I stop React from automatically scrolling the page when re-rendering?

Encountered a perplexing issue with React - it automatically scrolls the page upon re-render. Check out the demo app on CodeSandbox - https://codesandbox.io/s/react-scroll-bug-demo-y7u50j?file=/src/App.js To replicate the problem, follow these steps: Sc ...

Error: The selected date range is invalid and cannot be displayed

My sanity is slipping away due to this persistent error. Despite trying every solution, nothing seems to resolve the issue. The problem lies with a material-ui Datepicker calendar that was working flawlessly until today. Strangely enough, I haven't ma ...

Incorporate a personalized add-button into the material-table interface

My current setup includes a basic material-table structured like this: <MaterialTable options={myOptions} title="MyTitle" columns={state.columns} data={state.data} tableRef={tableRef} // Not functioning properly editabl ...

Issues with ellipses not functioning properly have been identified specifically on Safari when using the line

Currently, I am using the line-clamp feature to restrict the titles on a blog to only two lines at most. This functionality works perfectly fine on Firefox and Chrome browsers; however, when it comes to Safari, the ellipsis appears in the middle of the sen ...

"Cross-origin resource sharing problem while working with NodeJs, Express, and React on

Currently, I am working on a small project where I am using NodeJs and Express for the backend and React for the client side. In order to tackle CORS policy issues, I have implemented the "cors" npm package on the server side, but unfortunately, it doesn& ...

Having difficulty integrating a specific NPM package with a React project

I'm trying to incorporate the TagCloud package into my React application, but I'm encountering some difficulties. Despite not receiving any error messages in the console, the TagCloud component simply doesn't show up on the page. Interesting ...

A guide on defining the width of an element within a flex container when it overflows

Here is the code snippet I have: .divA { background: red; width: 500px; display: flex; flex-direction: row; overflow-y: scroll; } .epi { width: 50%; background: blue; } <div class="divA"> <div class="epi"> <h1>dsds ...

Error displayed inline

I am facing an issue with a hidden textbox that I need to make visible based on a certain condition. Despite checking that the control is being triggered by the change event, I am unable to get it to display. I have experimented with different methods with ...

Tips for displaying and sorting two requests within one console

I am currently working on a project to display both folders and subfolders, but only the folders are visible at the moment. function getParserTypes (types, subject) { return types.map((type) => { return { id: type.entry.id, name: type. ...

How to make a div stretch to full browser height using CSS and jQuery

I've been attempting to stretch a div to the browser's height using CSS in jQuery, but it doesn't seem to be working. I can successfully apply 100% width to the div, but height is proving to be a challenge. Any ideas why this might be happen ...

Tips for properly sizing 13 images in Next.js

I've been facing some challenges while working on a responsive website, particularly with getting the sizing right. When viewing my image on mobile, everything looks good: https://i.sstatic.net/gNm14.png However, when I switch over to desktop view, ...

Implementing onMouseEnter and onMouseLeave functionalities for music player

Currently facing a challenge while developing a music player app. I am trying to implement a feature where: Upon hovering over a song, a "play" button should appear in place of the song number. The currently playing song should display a "pause" ...

Techniques and Strategies for showcasing several images in close proximity

I am looking to arrange dummy images in a row next to each other, similar to the example shown here: https://i.sstatic.net/HUUGz.png Since my CSS skills are not very strong, I am seeking guidance on the proper way to achieve this. The images I have are a ...

Switch Between Different Background Colors for Table Rows With Each Click

This script changes colors when a row in a specific column is clicked: $(document).ready(function(){ $("#rowClick").children("tbody").children("tr").children("td").click(function(){ $(this.parentNode).toggleClass("enroute"); }); }); CSS: .placed{ b ...

Looking to distinguish selected options in a multiple select in AngularJS by making them bold?

When working with Angular, I have a multiple select drop down with options such as Select fruits, Apple, Orange, Banana. How can I make the selected options, like Banana and Apple, appear in bold and change background colors? ...

What is the best way to connect an image to a different webpage?

I have a question regarding a div that contains an image acting as a link to another page. The image has text overlaying it and can be found at this link: This code was sourced from the internet, but I made some modifications to it. My goal is simply to ...