"Exploring the possibilities of customizing Material UI tabs and implementing a tabs scroller

I'm currently trying to customize the appearance of these MUI tabs, specifically the tab color and bottom border color. Despite my attempts using makeStyles and other methods, I haven't been able to achieve the desired result. https://i.sstatic.net/SUtQn.png

Here is an example of my code:

import { makeStyles } from '@mui/styles';
const useStyles = makeStyles({
    tab:{
     "& .MuiButtonBase-root":{
          marginLeft:"25px"

     }
    },
    tabs:{
         "& .MuiTabs-indicator":{
              ml:"30px"
         }
    }
})

In addition, I'm encountering challenges when it comes to customizing MUI classes. While I have used the sx props solution, I understand that it may not be the best practice.

javascriptcssreactjsmaterial-uinext.js

Answer №1

https://i.sstatic.net/1YuQH.png

const customTheme = createCustomTheme({
  elements: {  
  CustomTabs: {
  overrides: {
    highlight: {
      background: 'orange',
      height: 10,
    },
  },
},
}
})

Answer №2

To customize the appearance of the selected tab, you can utilize the property '&.MuiTab-root.Mui-selected'. For changing the border color of the active tab, you can use the prop TabIndicatorProps and include a styles property, like so:

const CustomizedTab = styled((Tab))({
    '&.MuiTab-root.Mui-selected': {
        color: 'gold',
    },

and

TabIndicatorProps={{                   
style: {
         backgroundColor: '#f1db29'
       }
}}

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

The `margin:auto;` property does not function properly with inline-block elements

I recently adjusted my "container" div by changing it to an inline-block. Previously, I had applied margin:auto; to center it, which worked well with a specified width. Original Code (functional) #container { border: 1px solid black; height: 2 ...

htmlcssmargin

Step-by-step guide for implementing an "on change" event for a select box within a dialog box

I recently wrote an HTML code snippet like this: <div id = "dialog-1" title = "Dialog Title goes here..."> <select id= "lang" name= "lang"> <option value="1"> TEXT </option> <option value="2"> HTML </op ...

javascriptjqueryangularjsjquery-uijquery-plugins

`Is it possible to animate the rotation of an image within an input control?`

After coming across this helpful answer, I successfully added a rotating GIF image as an icon inside an INPUT control on its right side. Simply applying the "busy" class to my control did the trick, and now it looks like it's in progress. input.busy { ...

cssangularanimationpseudo-class

Using jQuery Mobile alongside two distinct versions of jQuery

My current task involves inserting both jQuery and custom JavaScript into the DOM of an existing page. The jQuery is inserted right before my script, where I utilize window['my$'] = jQuery.noConflict(true);. This approach worked smoothly after ...

javascriptjqueryjquery-mobileconflicting-libraries

At what point are DOMs erased from memory?

Recently, I've been working on an application that involves continuous creation and removal of DOM elements. One thing I noticed is that the process memory for the browser tab keeps increasing even though the javascript heap memory remains steady. To ...

javascripthtmldommemory-managementmemory-leaks

Is it advisable to incorporate Material-UI into a React project?

When it comes to designing a login page in react, I stumbled upon material-ui. The real question is, should we utilize Material-UI for this purpose? Furthermore, how can we manage styles in a separate file in the given examples? It seems logical to place t ...

javascriptcssreactjsmaterial-ui

What are some ways to adjust ESlint's strictness when using Prettier in a React project that utilizes Material-UI?

Update I made some changes to the .eslintc file in my client app's root directory. I added a JS Object with an "extends" attribute defined as "react-app" and included the "prettier" plugin in the "plugins" array. { "extends": "react-app", " ...

reactjsmaterial-uieslintprettier

What is the correct method for embedding a javascript variable into a Twig path?

I am looking to include a variable declared in JavaScript into the path for redirecting my page. Here is my code: var id = $(this).attr('data-id'); windows.location = {{ path("mylink", {id: id}) }}; Unfortunately, I am getting an error when ...

javascriptphpsymfonytwig

Incorporate the JavaScript file fetched from NPM into the app.js code

New to using node and npm, I recently set up my main JavaScript file called app.js and configured webpack nicely. Inside app.js, I currently have the following script: //require in jquery var $ = require('jquery'); //require a constructor f ...

javascriptnpmwebpack

Is there a way to display .form-check-inline buttons on a different line than their corresponding label?

I'm trying to create a form with radio buttons and using Bootstrap 4 to align them horizontally with the .form-check-inline class. However, this causes the input labels to be on the same line as the buttons: <html> <head> <link ...

htmlcssformsbootstrap-4

Ensure the slider functions on all types of browsers

I found a code snippet for an image slider on codepen and integrated it into my project. However, I encountered some issues trying to center the slider in the browser window with 5% space on each side. I attempted using $(window).width(); to set the width ...

jqueryhtmlcssslideshowtransition

Is it possible to implement a custom radio tab index without using JavaScript

Is it possible to apply the tabindex attribute on custom radio buttons, hide the actual input element, and use keyboard shortcuts like Tab, Arrow Up, and Arrow Down to change the value? Check out this example on StackBlitz ...

javascripthtmlcssreactjs

Navigating a text input field in a NextJS application

Having trouble with handling input from a textarea component in a NextJS app. This is the structure of the component: <textarea placeholder={pcHld} value={fldNm} onChange={onChangeVar} className="bg-cyan-300" ...

typescriptnext.jstextarea

Updating the Navigation Bar after User Logs in

In the process of working on my assignment, I am in the midst of developing a web application. As someone who is new to using React, I'm currently trying to figure out how to modify my navbar once a user has logged in. For instance: Prior to logging ...

reactjsexpressreact-reduxmernjwt

React - utilize a variable as the value for an HTML element and update it whenever the variable undergoes a change

I'm on a mission to accomplish the following tasks: 1.) Initialize a variable called X with some text content. 2.) Render an HTML paragraph element that displays the text from variable X. 3.) Include an HTML Input field for users to modify the content ...

javascripthtmlreactjs

React - verifying properties

Here's a question that I've been pondering. In many situations, we find ourselves needing to check if props are undefined. But what about nested props? For example, let's say we have: this.props.data.income.data1.value.chartData and we wa ...

javascriptjsonreactjs

Trying to bring in components from directories above

I'm currently facing an issue with importing components from a parent directory into my project. My goal is to be able to use these components across multiple projects, which seems like the most straightforward approach. However, when I attempt this, ...

javascriptreactjsnext.js

Angular JS Integration with PapaParse

Currently enjoying the efficiency of PapaParse's CSV parsing and unparsing features. Interested in integrating this with Angular JS - anyone able to assist with this integration? Excited about incorporating PapaParse into an Angular environment. Work ...

javascriptangularjscsvpapaparse

What could be causing my Google Analytics to malfunction post-deployment on Next.js?

I recently integrated Google Analytics into my website. It was functioning properly in my local environment, but once I moved the API key to an .env.local file and added the environment variable on Vercel for deployment, it started showing "no data avail ...

google-analyticsnext.jsenvironment-variables

Fiddle demonstrates HTML functionality, while local testing is unsuccessful

Currently, I am in the process of creating an image slider and attempting to run it on my personal computer. However, upon doing so, I have encountered a problem where the page is not rendering correctly. Additionally, I receive an ActiveX warning message ...

javascriptjquerycsshtml