"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.

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

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 functionality of the jQuery scroll feature appears to be malfunctioning

I am trying to implement a scroll event and have written the following code: <script type="text/javascript> $(function () { $(window).scroll(function () { alert($("body").scrollTop()); }); }); ...

javascriptjqueryscroll

Tips for keeping a div element at the top of the page

I am looking to have a div stick to the top of the page when someone scrolls down When the page is scrolled, the green div with class stickdiv should automatically stick to the top var left = document.getElementsByClassName("stickdiv"); for( var i = 0; ...

javascripthtmlcss

Simple steps for Mocking an API call (Get Todos) using ComponentDidMount in React with Typescript, Jest, and Enzyme

About the application This application serves as a basic To Do List. It retrieves tasks from an API located at https://jsonplaceholder.typicode.com/todos?&_limit=5. Objective of the project The main goal is to test an API call that triggers ...

javascriptreactjstypescriptjestjs

You can only set headers once during the initial request; any additional attempts to set headers will result in an

I encountered a specific issue with the error message "Can't set headers after they are sent". Here is the relevant code snippet: create: (request, response, next) -> socket = @app.socket # # This method will be used to call the right method ins ...

javascriptnode.jsexpresscoffeescript

Tips for defining the width of columns that adapt to different screen sizes in Bootstrap version 4

Utilizing Bootstrap 3, I can effortlessly create a responsive table with adjustable columns using the grid system. Additionally, I have the ability to hide certain columns on smaller devices. For instance, consider this example where the table consists of ...

csstwitter-bootstrapresponsivenessbootstrap-4

Utilizing a box within a background image using HTML and CSS

In the midst of my college project, I've encountered a hurdle. There's an image I need to overlay with a box that has padding on all sides corresponding to the outline of the image. Despite my attempts, I haven't been successful in achieving ...

htmlcss

Launching an embedded webpage in a separate tab within the main browser window

In my current setup, I have implemented an iframe within the main window. The iframe includes a form where users can input data and submit it. Currently, I achieve the submission with the following code: var openURL = '/results/finalpage'; windo ...

javascriptjqueryiframejquery-events

Display popup depending on the post's identification number

Currently, I'm in the process of integrating Sanity into my blog. Using the json object returned from a query with useState, I managed to display my posts successfully. However, I am now faced with the challenge of populating a React-Modal with the ap ...

javascriptreactjsreact-hooksdynamically-generatedreact-modal

Guidelines for creating an auto-scrolling React Native FlatList similar to a Marquee

I currently have a FlatList component set up in my project. <FlatList horizontal data={data} key={(item, index) => index.toString()} ListHeaderComponent={listHeader} renderItem={ // renderin ...

javascriptreactjsreact-nativereact-native-flatlist

The npm lint command is throwing an "Observable `source is deprecated`" error

When I execute the command npm lint on my code, I receive a warning stating "source is deprecated: This is an internal implementation detail, do not use." The specific part of the code causing this issue is shown below: set stream(source: Observable<a ...

javascriptangulartesting

I am having trouble using sass files with the command 'dotnet new react'

I attempted to create an ASP.NET Core application with a React frontend, so I executed the following command: dotnet new react -o <project name> This generated a runnable project. However, the issue arose when it couldn't handle sass files. To ...

node.jsreactjsnpm.net-coresass

Unable to assign values to textarea and checkbox in MVC5

I am currently facing an issue with setting values in JavaScript + jQuery in MVC 5 for textareas and checkboxes. Here is the JavaScript code I am using: document.getElementById("UpdatetxtDescription").value = "abc"; document.getElementById("Upda ...

javascriptjqueryasp.net-mvcasp.net-mvc-4asp.net-mvc-3

Creating distinctive identifiers for individual function parameters in JavaScript using addEventListener

I am working on a for loop that dynamically generates elements within a div. Each element should trigger the same function, but with a unique ID. for(var i = 0; i < 10; i++) { var p = document.createElement("p"); var t = document. ...

javascriptdom-events

The number field is persisting with its content even after submitting, while the other fields successfully clear up

I am facing an issue where all fields clear up after submission except for the number field. I would appreciate any help on why this is happening and how to fix it. Thank you. Textfield number: const [number, setNumber] = useState(""); const han ...

javascriptreactjsmaterial-ui

What is causing the malfunction in communication between my React app and Express server via fetch requests?

I am currently facing an issue while trying to connect my react js frontend (hosted on localhost for testing purposes, and also on my S3 bucket) to my node.js/express server deployed on an AWS Elastic Beanstalk environment. To resolve a CORS error, I recen ...

javascriptnode.jsreactjsamazon-web-servicesexpress

Looping through elements with jQuery's `each` method within another `

When using div containers in my code, I wanted to loop over them and then iterate through the items within each container. Instead of $('.stackContainer .stackItem').each(, I was looking for a solution like this: // setup stacks $('.stackC ...

javascriptjqueryhtml

Dealing with redirect issues in a React-Material menu: A guide to troubleshooting and

When working with my menu, I face a variety of issues. First and foremost, within the initial RETURN section, there is a TREEITEM with a LISTITEM and a LISTITETEXT. I have included an OnClick event in the LISTITETEXT so that if the menu's id matches ...

javascriptreactjsmaterial-ui

"Material Design: Streamlining user interactions with a single search field and two distinct action

Looking for design tips? We currently have a search field that allows users to search for either a role or a user. If you search for a user, you can copy their role assignments OR If you search for a role, you can add the selected role. Currently, the U ...

material-designmaterial-ui

Utilize the information retrieved from generateStaticParams (Next 14 days)

It's interesting to see how generateStaticParams functions. Typically, we retrieve one id to create each segment. While the API call used for this purpose contains the necessary data to populate each page generated at build time, it seems impossible ...

reactjsnext.jsserver-side-renderingnext.js13generatestaticparams

Retrieve the id of an element from a JSON object

Dealing with quotes, single or double, can sometimes pose a challenge. I am working on a JavaScript function that sends data to a PHP file and receives a JSON response. Everything seems to be functioning correctly, except for the part where I need to out ...

javascriptphpjson