I created a custom NavBar with a unique tab indicator implementation:
indicator: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
},
<Tabs classes={{indicator: classes.indicator}} onChange={handleClickTab} value={value}>
{...}
</Tabs>
My current challenge is figuring out how to change the indicator shape from an underline to a square border. I need to be able to adjust paddings and other related styles. Any suggestions on how I can accomplish this?
Initially, I am aware that there is a correct answer at the top. However, if you are looking for an alternative approach, here is another way to achieve the same result. Please note that this may not be the most optimal solution, but it is what worked for me:
CSS:
//This code snippet changes the color of the text ↓
.MuiTab-textColorPrimary.Mui-selected {
color: var(--darkGreen) !important;
}
//This code snippet modifies the span or bottom border ↓
.PrivateTabIndicator-colorPrimary-4 {
background-color: var(--darkGreen) !important;
}
All I did was target their class names and override them using the !important rule in CSS.
If this solution proved useful to you, as it did for me, then I am happy to have assisted! :) Cheers!
In Material-UI, the TabIndicator component is a span rather than simply being a border-bottom of certain elements. This means that in order to customize it with your own border color, you will need to completely remove the default indicator and add your own style, which may require some extra effort.
const useStyles = makeStyles({
indicator: {
background: "none" // Removing MUI indicator
},
tabs: {
"& button": {
padding: 5 // Border size
},
"& button[aria-selected='true']": {
position: "relative",
"&:before": {
content: '""',
position: "absolute",
left: 0,
top: 0,
right: 0,
bottom: 0,
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)", // Gradient border color
zIndex: 0
},
"& > *": { zIndex: 0 },
"& > .MuiTab-wrapper": {
background: "#fff",
height: "100%"
}
}
}
});
However, if you only need a solid color for your border, the implementation becomes simpler:
const useStyles = makeStyles({
indicator: {
background: "none"
},
tabs: {
"& button[aria-selected='true']": {
border: "3px solid red"
}
}
});
const classes = useStyles();
return (
<Tabs
className={classes.tabs}
classes={{ indicator: classes.indicator }}
{...props}
>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
);
https://codesandbox.io/s/66769333set-border-for-tab-indicator-in-material-ui-909s6?file=/index.tsx
Feel free to apply this formatting directly to your CSS file in order to customize the appearance of the Tab Border
.custom-tab-border {
background-color: white !important;
}
Let me know if you have any other questions
When accessing the mobile version of Facebook on a handheld device, you will notice a menu with various options like "About," "Photos," "Friends," "Subscriptions," "Map," and more. This menu is designed to be slideable on your mobile device. Using HTML, ...
Hey there, I'm currently working on a project in React Native and I've run into an error while trying to navigate. Error : I keep receiving the following error: Can't perform a React state update on an unmounted component. This is a no-op ...
Currently, I am restructuring my code to improve organization by moving data fetching to custom hooks instead of within the component file. However, I am encountering issues with the hook not functioning properly when used in conjunction with my context. ...
Currently working on a chat application using React JS and I'm looking to enable image uploading when an image is pasted into the chatbox. How can I make this happen? Essentially, I am in need of: An event that will activate upon performing the "Pas ...
Is there a way to retrieve text from a textfield in material UI without using the onChange method? It just seems odd that I would need to constantly track the value with onChange in order to use it for any other purpose. I decided to search for solutions ...
Currently in the process of converting a javascript/react project to a typescript/react/redux project. Encountering an issue with this particular file: import React from 'react'; import GoldenLayout from 'golden-layout'; import {Provi ...
I am currently using Beautiful DnD in my React Project and I have run into a bug. Only the last item in a droppable container is draggable. Whenever I try to click on other items, it shows me a warning saying "Unable to find draggable with id: id1". Howeve ...
My goal is to design a grid layout where each row can be divided into columns independently, similar to the example shown below: https://i.stack.imgur.com/VFPFq.png Here's the code snippet I have been experimenting with: .container { position ...
Working with react+ nextJS and fetching static objects, specifically "posts". The aim is to develop a "related posts" feature for each post that retrieves three posts containing at least one of the categories. Below is an excerpt simplified for clarity: co ...
Let's take a look at the CreateAccount component in this code block. We are destructuring the formData, setForm, navigation, and submitForm props that are passed into this component. To enhance the functionality of this component, I am considering us ...
I'm facing a challenge in determining the actual height of an element, which currently has a CSS height property set to: height: 0; When I check the console, it shows a height of 0, but I'm looking to find the real height of the element. I als ...
Essentially, this is the functionality I am trying to achieve. The "indicatorClassName" attribute is not providing the desired result for me, and even after attempting to use the indicator from the provided CodeSandbox link, there was no change. Upon revie ...
When using the Table Component from the material-ui library, I encountered an issue with the multiSelectable feature. Setting the value of multiSelectable to true allows for multiple selections, but the behavior is not what I expected. By default, the sel ...
Just starting out with React.js and npm and encountered an issue. After using the command: npm create react-app my-test-npm-react-app I waited for the project to be created successfully. However, when I tried running: npm start I received the followin ...
My website development process hit a roadblock when I tried integrating Material Tailwind into my project alongside Next.js, Typescript, and Tailwind CSS. The compilation error that popped up seemed unrelated to the changes, leaving me baffled as to what c ...
Currently, I am working on my local system developing a file upload feature using node js. My project file structure looks like this: Project ..client .... source code of React App ..Server ....uploads ......avatar ........image.png ....index.js In this ...
I am looking to stack multiple tile divs on top of each other by using negative margin-right: -10px. My goal is to have the previous div displayed on top, with new sibling divs appearing below it. Currently, the newer div overlaps the previous one. While ...
Greetings, I have a couple of queries regarding Next.js, testing-library/react, and emotion. Before diving into the questions, let me share some code below: // Component import { css, Theme } from '@emotion/react'; function Foo() { return < ...
I am looking for a way to ensure that a specific React application is always present on my website. If the URL is broken or if there is an error in the React app, I want to be notified. How can I continuously monitor a given URL to check if the page contai ...
Having an issue setting page = 1 prior to invoking the handleSearchClick function within resetStates. After clicking the search button, the page is not resetting to 1 on the first click but does so on the second search click. I attempted to utilize async ...