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
angular.element($document[0].querySelector("table > tbody > tr")).mouseover().css("background-color", "red"); <table> <thead> <tr> <th>Name</th> < ...
I am just starting to learn jQuery and I want to create a menu similar to the one on this website Specifically, I would like the menu to slide down from the viewport to the header, as shown in the template in the link. I have searched through the jQuery ...
I want a button that toggles between displaying "Edit" for entering Edit mode and "Save" for submitting the form. However, the issue is that when I press the button while it shows "Edit," it submits the form. Link to codesandbox with the code provided be ...
Hi there, I am working on my website and trying to create a smooth transition between sections similar to the one demonstrated here:. The challenge I'm facing is that the backgrounds of my sections cannot be fixed; they need to have background-attachm ...
My current dilemma involves a collection of divs that must be displayed in a specific order, but with a rather intricate layout. Essentially, this is the structure of my HTML: <div> <div class="box">1 (first in list)</div> <di ...
Hey there! I'm currently working on positioning one div on top of another div programmatically (using javascript or css). These divs are completely separate and have the following structure: <div class="bottom"> <img src="image"></i ...
i am struggling with positioning the high-chart with a label, as seen in the image below https://i.sstatic.net/m9bXW.png does anyone know how to properly display the chart from the top left corner? i have attempted to adjust the settings like this { ...
What are the different types of React.js's state and events? In the code snippet provided, I am currently using type: any as a workaround, but it feels like a hack. How can I properly define the types for them? When defining my custom hooks: If I u ...
My React application is functioning flawlessly on the development environment where it is running on webpack-dev-server, but it encounters issues on production (Apache). Strangely, it fails without any error being displayed in the console or elsewhere. The ...
I followed the configuration provided in another answer at But, I am facing an issue: Failed to compile. ./src/components/cards/CreateCard.js Line 59:22: Parsing error: Unexpected token, expected "}" 57 | editor={ClassicEditor} 58 | ...
I'm currently using Bootstrap 4 and facing some issues while attempting to create a button group with multiple rows, similar to the design shown in the image provided below. The default button groups in Bootstrap appear to only support arranging butto ...
Similar Question: Understanding the mystery behind this CSS triangle shape Please provide me with your valuable suggestions. ...
I have recently implemented React Redux in my project, but I seem to be encountering some issues. Despite changing the state, the value remains the same. I attempted to use useStore(), but it does not take any parameters. Can anyone provide insight into wh ...
I have successfully created a form with validation using TypeScript Material UI and Formik. Now, I am looking to enhance the visual appeal by adding a material UI Icon within the textfield area. Below is a snippet of my code: import React from 'reac ...
I'm facing an error with my Next.js project while trying to integrate Material-UI. I followed a tutorial and implemented the _document.js code, but the issue persists despite spending hours troubleshooting. Here's a link to the screenshot of the ...
Is it possible to ensure that row selection in a table is consistent in terms of border alignment on both sides? https://i.stack.imgur.com/qmZiQ.png If you have any suggestions or solutions, please share them. Thank you! table { margin: 10px; bord ...
Currently, I am developing a React application in VS Code. To test and debug my work, I typically run npm start in the terminal to initiate the application server. This action successfully launches Chrome with the React Devtools extension installed under t ...
Working on a React web app, I am solely using js and css files without any html. In one of my js files, there is a mix of html and js code like this: class Teams extends Component { state = { teams: [] } componentDidMount() { ...
I am facing an issue with my Bootstrap carousel where the z-index is not working as expected. The decoration I have in the background is overlapping the text instead of appearing behind it. I want the illustration to be positioned under the text. .carou ...
Recently completed the construction of my new website, it appears flawless when viewed on Chrome. However, upon inspecting it on Firefox (OS), I noticed that there is an approximately 15px space at the bottom of the page. I am struggling to identify what m ...