The styling of Material UI's contained button is being overridden by MuiButtonBase-root

Currently, I am working with material-ui in a react project. In one of my components, I have incorporated a simple contained button:

<Button variant='contained' color='primary'> Edit</Button>

However, despite setting it as a contained button in the code, it does not appear that way on the interface. You can see how it looks in this screenshot here.

After delving deeper into the issue, I discovered that the .MuiButton-containedPrimary style is being overridden by the .MuiButtonBase-root styling, as illustrated in this screenshot captured from chrome dev tools.

If anyone has any suggestions or solutions to address this problem, I would greatly appreciate your guidance.

cssreactjsbuttonmaterial-ui

Answer №1

I encountered a situation where an issue arose in my application due to conflicting versions of Material UI being used by both my app and a component library it relied on. This resulted in duplicate styling for the .MuiButtonBase-root class.

To resolve this, I restructured my package.json file by moving @material-ui/core from dependencies to peerDependencies.

This problem can also manifest if imports are nested incorrectly. For instance:

import Button from '@material-ui/core/Button/Button';  // Incorrect

It should instead be:

import Button from '@material-ui/core/Button';  // Correct

For more information on this issue, check out the discussion on the Material-UI GitHub page: https://github.com/mui-org/material-ui/issues/15610

Answer №2

.MuiButton-root should be responsible for holding the color code, not the .MuiButtonBase-root

Is your button example truly reflective of the buttons you're using in your code? It seems to have a primary class which suggests the use of the color property resulting in:

<Button variant="contained" color="primary">
   Edit
</Button>

Double check the added classNames and identify which one is actually overriding the color.

Answer №3

For my situation, I decided to incorporate new resources such as mui and material-table into my project. However, upon removing material-table from the equation, everything functions smoothly. It seems that when using material-table, there are some styles being overridden.

Answer №4

Consider relocating @material-ui/core to the devDependencies section:

"devDependencies": {
  "@material-ui/core": "^4.12.0",

Also remember to include it in the peerDependencies list:

"peerDependencies": {
  "@material-ui/core": "^4.12.0"
},

This adjustment resolved issues with duplicate MuiButtonBase-root classes for me.

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

What is the best way to retrieve the value of a Select element that is rendered dynamically through the onChange method?

My Select component from Material UI looks like this: <FormControl className='select-form'> <InputLabel id="demo-simple-select-outlined-label">Choose User</InputLabel> <Select labelId="demo-simp ...

reactjsselectreact-reduxmaterial-ui

In React, transfer the status of various types of pressed buttons and send already pressed buttons to another component

My component consists of multiple buttons arranged in different types and subtypes. The goal is to save the state of each clicked button using a hook containing an array of objects representing the click state of each subtype. Additionally, there is a < ...

reactjsreact-hooks

Creating divs that adapt to different screen sizes without relying on flexbox

Currently, I am in the process of developing a chat interface where the viewport height is set to 100vh. The layout consists of a header/navbar, a "main content" section, and a footer housing the input field (you can view the code here) The way I have str ...

javascriptjqueryhtmlcssresponsive-design

Focusing solely on the presence of lowercase characters within the text field

Is it possible to apply a different color to lowercase letters in a text area? I am looking to highlight all lowercase letters in red while keeping the uppercase letters black. ...

csscss-selectors

How to access the current class in Sass without referencing the parent class

.site-header .basket position: relative &-container width: 100% padding: 0 18px $basket: & &.opened #{$basket}-link border: 1px solid #e5e5e5 ...

csssass

Retrieve specific properties from Material-UI text field within the onChange event handler

Hey there, currently working with react and material ui. When setting up a textfield, the markup looks like this: <TextField floatingLabelText="Email" onChange={this.props.onChange} ref="email" customAttr="customVal ...

reactjsmaterial-ui

What steps can you take to convert your current menu into a responsive design?

I am currently developing a website using PHP, HTML, and CSS. The site is not responsive, and I want to make the menu responsive. My global navigation and admin interface are not adapting properly as they are designed using tables. Is there a method I can ...

javascriptphpjqueryhtmlcss

Issue with animating multi-column layout in Chrome causing display problems

I'm currently utilizing jQuery to create an animated multi-column layout that extends off the screen horizontally. I have implemented two controllers - one red and one blue - to navigate back and forth within the layout. Strangely enough, while the an ...

jqueryhtmlgoogle-chromecssmultiple-columns

Mastering the art of positioning images using CSS and HTML in email marketing

Currently in the midst of designing an email template for a new project. I have set up a table, with one row featuring some stripes and the next row showcasing a black bar to match the site's layout. My question is: Is there a way to incorporate an i ...

htmlcssoutlookgmail

Tips for customizing text field appearance in Safari and Chrome

I haven't had a chance to test it on IE yet. My goal is to create a unique style for the background image and text box shape, along with borders, for the search bar on my website, [dead site]. If you check it out on Firefox or Opera and see the sear ...

htmlcssformsbrowsercross-browser

Locate HTML attribute values with the help of BeautifulSoup

Trying to extract data from HTML using BeautifulSoup has proven to be more challenging than expected. Specifically, I am struggling with utilizing the .find() function correctly in this scenario. Take a look at the HTML snippet below: <div class="a ...

pythonhtmlcssbeautifulsoup

The getStaticProps function returns a null value, whereas the identical code functions properly in a create-react-app environment

I recently switched my create-react-app to a next.js app in order to implement SSG. I successfully tested the getStaticProps function using a jsonplaceholder API and was able to retrieve data and display it. However, when I changed the API, it started retu ...

reactjsnext.jsstatic

Is it possible to transform the Bootstrap5 sidebar, currently positioned above the block content, into a sticky element on

After creating a Django blog using bootstrap5 and following guidance from the python crash-course book, I encountered an issue with my sidebar placement. Despite trying various methods, I struggled to "override" my blocks in order to keep my sidebar fixed ...

htmlcssdjangobootstrap-4bootstrap-5

Is separating Jssor Slider CSS effective?

Having a bit of trouble with the Jssor slider here. I'm trying to separate the slider styles into an external CSS document and running into issues. For instance: <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 11 ...

jquerycssjssor

Click on a div to switch between displaying an arrow pointing to the right and an arrow

Currently working on a design for an accordion-style layout and looking to implement toggling arrow icons when the div is clicked. I have managed to toggle the content of the div successfully, but now seeking assistance in achieving the same functionality ...

javascriptjqueryhtmlcss

Creating distance between two text boxes in bootstrap is easy with the use of margins. By

I am looking to create a small white space between two text boxes. <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="row col-lg-12 col-sm-12"> <div class ...

htmlcssbootstrap-4

The cascade of CSS elements arrangement

I have two unique boxes set up like this: <div id="box1"></div> <div id="box2"></div> The second box, box2, has a border and I'm looking to cover the top border with box1. To achieve this, I've applied a negative margin- ...

csslayer

Employ CSS flexbox and/or JavaScript for creating a customizable webpage

I am in the process of developing a basic IDE for an educational programming language that has similarities to Karel the Dog. One major issue I am encountering is creating the foundation HTML page. The IDE consists of 4 main areas: Toolbox (contains but ...

javascripthtmlcssflexboxcodemirror

How can I position a button to the right end of the x-axis using MaterialUI?

I'm working on a navbar component with the following structure: <AppBar position="static" color="inherit"> <Toolbar className={classes.toolbar}> <IconButton edge="start" color="inherit" aria-lab ...

reactjsmaterial-ui

Implement SCSS in Next.js 12 using Bootstrap

Ever since updating Next.js to version 12, I've been encountering issues with Bootstrap and SCSS integration. In my project, I have a global.scss file that is imported in the _app.js. Within this file, I include imports for Bootstrap and Bootstrap Ic ...

csstwitter-bootstrapsassnext.js