Personalized styling in material-ui v4.9.0

I recently updated the Material UI version in my project from 0.20 to v4.9. I have successfully changed all the imports to @material-ui/core and my app is compiling without any issues. However, I am facing a problem with the styling. Previously, I did not use styles in every component but instead used a global CSS file that I imported in my main.js. Now, for each element and component, I have added the style directly within the file. The problem arises with the default styling of Material UI components after the update. For example, the Chip component I was using had a classname like this:

.euro-chip-default {
    background-color: #FFF !important;
    border: 1px solid #E9EEF1 !important;
}

Unfortunately, after updating the version, this classname no longer works properly and now my Chip looks terrible. I have searched through the documentation but cannot find a solution. They suggest using withStyles, which would make my components too large. Is there anything specific I should do when it comes to using CSS in an updated Material UI project? Any help is appreciated! Thanks!

javascriptcssreactjsmaterial-uiclassname

Answer №1

To achieve the desired style for your chip, I recommend updating your CSS properties to align with those used in this Chip Styles reference.

In your styles.css file, you can implement the following:

.MuiChip-root {
  background-color: #FFF !important;
  border: 1px solid #E9EEF1 !important;
}

By applying these changes, your chip will be styled as intended.

You can also check out an example on CodeSandbox for further inspiration.

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

Postponed in JQUERY | AJAX

My requirement is to retrieve data using the "SetUnit()" function, which includes asynchronous AJAX services. I attempted to use Deferred as suggested in this link, but it did not work for my needs. Code...... Function function SetUnit(query) { var ...

javascriptjqueryajaxpromisejquery-deferred

Show a loading bar individually through jquery

I have a series of images along with progress bars that I need to display one by one. Specifically, I have 5 images each with its own progress bar. When the upload button is clicked, I want to show the first progress bar and execute the corresponding func ...

phpjavascriptjquery

In the world of web design, blank areas can sometimes appear on a page as you

My website has a fixed header with a height of 44 pixels, content that takes up 89% of the screen, and a footer that occupies 6% of the space. Everything looks fine when the browser is at 100% zoom, but as I zoom out, white spaces start appearing before th ...

htmlcsswebbootstrap-4

Iview Table UI Cell

Is there a way to retrieve the cell data from a library iview table in Vue.js upon clicking? I am looking to capture both the value of the cell and the title of the column, and then modify the CSS of that particular cell. For instance, clicking on one ce ...

javascriptvue.jsiview

How can we determine the source website from which we were redirected?

One feature I am working on for my application is a back button. I want to be able to track where users are coming from when they land on my website from another domain. How can I determine the URL that brought them to my site? My goal is to redirect the ...

javascriptangularjs

The system does not acknowledge 'NODE_OPTIONS' as a command that can be used internally or externally, or as an operational program or batch file

While trying to build my react + vite project, I encountered an error after running npm run build. https://i.stack.imgur.com/XfeBe.png Here is a snapshot of my package.json file. https://i.stack.imgur.com/MbbmY.png ...

reactjstypescriptnpmbuildvite

Seamless integration of NextJS with Woocommerce backend

I am currently in the process of integrating NextJS with a backend WooCommerce using GraphQL. One thing that I have been pondering is how to reconfigure the setup. Currently, Wordpress/WooCommerce is set up as follows: mywebwoo.com - default WordPress sto ...

reactjswordpressnext.jswoocommerceheadless

Tips for switching back and forth with JQuery

I have an accordion element that opens on each click, but I am wondering how to close it back again? Here is an example of the HTML structure: <ul class="accordion"> <li id="one" class="files"> <a href="#one">Calendar 1<span& ...

javascriptjqueryhtmlcss

Having trouble with triggering a Material UI modal from a Material UI AppBar on a Next.js page

As a newcomer to the world of React.js and Next.js, I am encountering difficulties when trying to open a Material UI modal from a Material UI AppBar within a Next.js page. Most of the code I have implemented here is directly copied from the Material UI we ...

javascriptreactjsnext.jsreact-hooks

Guide to utilizing JSDoc within your local project

Objective My goal is to utilize jsdocs with npm in my project. Experience I am new to working with npm and its plugins. Recently, I came across jsdoc and attempted to incorporate it into my project without success. Attempted Solution Initially, I inst ...

javascriptnode.jsubuntunpmjsdoc

Troubleshooting Bootstrap Column Display Issues on Mobile Devices

I used bootstrap columns to organize my users' information. While they look good on larger screens like laptops and desktops, on smaller phone screens the second column appears to have some excess margin at the top. How can I fix this issue? <div ...

htmlcssbootstrap-4

A simple way to deactivate a React component (or the onClick event itself) using the onClick event

I have come across similar inquiries, but unfortunately, none of the solutions provided seem to work in my particular scenario. I am hopeful that someone can shed some light on what might be causing the issue. In my ReactApp, there are 3 card components t ...

javascriptreactjsuse-state

The best practices for coding Jquery plugins to adhere to style guidelines

I have been grappling with this issue for quite some time now, and I am seeking feedback from others. I am in the process of creating a personalized library to expedite web app development, and I want to ensure that I adopt the correct approach. My intenti ...

javascriptjquerycss

"Encountering an error message stating "Cannot access SpreadsheetApp.getUi() within this context" when attempting to execute the

I've encountered an issue while trying to access the UI object in Apps Script. The code I'm using is something I've used before without any problems, but now I'm getting an error message that says "Cannot Call the .getUI()" method from ...

javascriptgoogle-apps-scriptgoogle-sheetsgoogle-apps-script-editor

Implementing loading animation upon button click in Reactjs

I am facing a situation where I need to update the vote counts of three election contestants by making Axios calls to the server backend. So far, everything is working smoothly and I am able to receive JSON responses from the Axios calls. [{ "id": "1", " ...

reactjs

Once I retrieve a collection of items from an API, what is the best way to incorporate this list into the State of a Component using React hooks?

Having trouble setting a list of students fetched from an API to the state using react hooks. Here's the code snippet: const Book = ({ book }) => { const [students, setStudents] = React.useState([]) const [form, setForm] = React.useState(false) con ...

reactjsuse-state

Position the Bootstrap icon to float to the far right

My icon is always positioned to the right instead of beside the input field. Take a look at the image below: https://i.stack.imgur.com/Bb1eH.png The icon does not align next to the input field. This is my code snippet : <div class="form-horizontal"& ...

csstwitter-bootstrap

Struggling with changing the state in React following an API request

I am currently working on developing a textbox that features autocomplete by fetching suggestions from an API. However, I am facing challenges with updating the state after retrieving the array from the API endpoint. The code I am modifying can be found he ...

reactjs

js: managing dynamic JSON creation based on input fields

I'm looking to create a JSON object with dynamic keys and values by parsing information from a form. Each input field in the form includes a data-key attribute which specifies the key name: <input type="text" class="form-control" ...

javascriptjquery

Looking for suggestions on AngularJS and Rails integration!

I'm currently in the process of creating a website using rails, but I want to integrate AngularJS for several reasons: Efficient sorting between 2 different types of data (such as selecting various restaurants from a list and then different food cate ...

javascriptruby-on-railsangularjs