What is the best way to customize CSS in Material UI?

When working with material UI and reactjs, I encountered an issue while trying to override the button color without affecting the tab colors (see screenshot). How can I achieve this using themes in material UI? Code: 

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#DDB61A',
        },
        secondary: {
            main: '#1d83c6',
        },
    },
});


<MuiThemeProvider theme={theme}>
    <AppBar position="static">
           <Tabs value={value} onChange={this.handleTabChange}>
           <Tab label="USDT" />
           <Tab label="BTC" />
           <Tab label="ETH" />
           </Tabs>
        </AppBar>

    {value === 0 && <TabContainer>
    <Button variant="contained" color="primary" fullWidth={true}>
              Buy/Login
         </Button>
    </TabContainer>}
</MuiThemeProvider>

Another approach that was attempted:

    const theme = createMuiTheme({
        palette: {
            myBtn: {
                main: '#DDB61A',
            }
        }
    });

<MuiThemeProvider theme={theme}>    
    <Button variant="contained" color="myBtn" fullWidth={true}>
          Buy/Login
    </Button>
</MuiThemeProvider>

Screenshot:

https://i.stack.imgur.com/51KHi.png

htmlcssreactjsmaterial-ui

Answer №1

To change the appearance of a component, you can use overrides:

const customTheme = createMuiTheme({
    palette: {
        primary: {
            main: '#ce93d8', // main color
        },
        secondary: {
            main: '#1d83c6',
        },
    },
    overrides: {
        MuiButton: { // Component name ⚛️ / style sheet
            root: { // Rule name
                background: '#DDB61A', // Custom CSS
            },
        },
    },
});

For more details, visit: https://material-ui.com/customization/overrides/

Answer №2

When you want to modify the overall theme, there are various methods available. You can alter the style of specific elements or change the appearance of all instances of a particular element within your application.

If your goal is to adjust the color of a single button, you can utilize override classes like this:

const buttonStyle = (theme) => ({
    root: {
        background: 'red'
    },
});

const StyledButton = (props) => withStyles(styles)(
    <Button classes={{root}}/>
);

To customize the style for all buttons, you can achieve that by creating a bespoke theme:

import { createMuiTheme } from '@material-ui/core/styles';

export const createCustomTheme = () => theme => {
  return createMuiTheme({
    ...theme,

    overrides: {
      MuiButton: {
        root: {
          background: 'red'
        }
      },
    }

  });
};

export default creatCustomTheme();

Answer №3

Add a fresh color option to your color scheme:

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#DDB61A',
        },
        secondary: {
            main: '#1d83c6',
        },
        tertiary: {
            main: '#000',
        },
    },
});

then include this button in your code:

<Button variant="contained" color="tertiary" fullWidth={true}>
              Buy/Login
         </Button>

Answer №4

In case anyone happens to stumble upon this inquiry: I have found the answer for globally overriding components in MUI v5, and it can be accessed through this link: Global style overrides

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

Execute test scenarios and upon successful completion, initiate deployment of a React JS application using Jenkins

I am currently facing an issue with running test cases and deploying a React-js app using Jenkins. After pushing my code to Git, I can successfully run the React-js app locally. However, when trying to execute the second command mocha (which is used to ru ...

node.jsreactjsjenkinscontinuous-integration

Adaptable HTML design with alignment features

Here is the structure I am working with: <style> #main { max-width: 500px; margin: 0 auto; overflow: hidden; border: 1px solid red; } #container{ margin-right: -50px; } .block{ display: inline-block; width: 100px; height: 100px; border: 1px solid gr ...

htmlcss

The script for tracking cursor coordinates is incompatible with other JavaScript code

<html> <script language="javascript"> document.onmousemove=function(evt) { evt = (evt || event); document.getElementById('x').value = evt.clientX; document.getElementById('y').value = evt.clientY; document.ge ...

javascripthtmlbrowser

Maintain the progress bar in its previous state when navigating

I'm encountering an issue with my progress bar in the template I've created. Whenever I navigate between routes, the progress bar resets to 0 instead of continuing from where it left off. Despite trying various methods like localStorage and movin ...

reactjsmaterial-uireact-router-dom

Tips for changing a "raw" DOM Event into a React SyntheticEvent

Currently, I am working with two separate libraries. The first library emits "raw" DOM events (lib.dom.d.ts), while the other library consumes React.SyntheticEvents. I am seeking advice on the most efficient method to transform the raw event into a Synthe ...

javascriptreactjstypescript

My component reference seems to have gone missing in angular2

Trying to load my Angular 2 app, I encountered this error: https://i.stack.imgur.com/FmgZE.png Despite having all the necessary files in place. https://i.stack.imgur.com/kj9cP.png Any suggestions on how to resolve this issue? Here is a snippet from ap ...

javascripthtmlintellij-ideaangular

Exploring a different approach to utilizing Ant Design Table Columns and ColumnGroups

As per the demo on how Ant Design groups columns, tables from Ant Design are typically set up using the following structure, assuming that you have correctly predefined your columns and data: <Table columns={columns} dataSource={data} // .. ...

javascriptreactjstypescriptantd

How can I efficiently add multiple items to an array and store them in async storage using React Native?

I am trying to store multiple elements in local storage using React Native. I found some helpful documentation on how to do this here. Could someone guide me on the correct way to achieve this? Here's a snippet of my code: My current approach const ...

javascriptreactjsreact-nativelocal-storage

Tips for shifting a div to the left with AngularJS

I am working with a div structure that looks like the following: <div class="col-xs-1 scroll-button"><i class="glyphicon glyphicon-chevron-left"></i> </div> <div class="customer-ust-bant col-xs-22" id="letters"> <box n ...

jquerycssangularjs

The specified location "/login" did not match any routes with react router dom v6

I have been working on organizing routes in `react-router-dom v6. My current flow looks like this: root AppComponent function AppComponent() { return <AppRoute />; } AppRoute.js (base routes) const AppRoute = () => { return ( <> ...

reactjsreact-router-dom

What is the best way to send props to a React component?

Sorry for the inconvenience of asking for help with finding an issue in my code, but I'm facing challenges while learning React. I am attempting to pass a variable named hashRoute to a component in react. However, every time I try to access the prop ...

javascriptreactjs

React component unable to trigger signalR connection.hub function

Setting up a chatboard using signalR to notify users of new comments on posts. Using React and encountering issues with event listeners in different components. The hub code: public class CommentHub : Hub { public void UpdateComments(int postId) ...

reactjssignalrsignalr-hub

Samsung devices exclusively showcase background in responsive design

I am encountering a major problem with my website design, specifically with its compatibility on mobile devices. To ensure its responsiveness, I have tested the design on my iPhone, iPad, and Windows Phone. Unfortunately, since I lack an Android device, I ...

androidhtmlcssbrowser

Utilizing CURL for PHP to extract information from any webpage

Can a PHP function be created to generate an HTML string of any link like a browser does? For example, links such as "", "", "mywebsite.com", "somesite.com/.page/nn/?s=b#85452", "lichess.org" What I have attempted: $curl = curl_init(); curl_setopt($curl, ...

phphtmlparsingcurl

Passing React props to a component is essential for proper functioning

The following code represents a react component named Start. Its main purpose is to receive a player's name through a form using onSubmit. The player's name is stored in a hook called "player" and then passed as a prop to another component called ...

reactjsreact-hooksreact-router-domrouterprop

Making a floating action button in Ionic

I am currently working on creating an action floating button using the Ionic framework. While I have successfully created a basic button, I am now looking to add some stylish effects and make additional buttons appear upon interaction. I understand that th ...

cssangularjsionic-framework

Ensure the sum is recalculated whenever the input changes by using the jQuery change event

I am creating a system that requires the total values of multiple inputs to not exceed 100. I have successfully implemented this functionality, but now I need a way to automatically adjust the total if changing one input causes it to drop below 100. Here& ...

javascriptjqueryhtml

Show the current temperature data retrieved from the weather API

I'm trying to figure out what's causing the issue with the temperature not displaying. Can anyone help me identify and fix the error? <script type="text/javascript"> $.ajax({ url: 'https://api.weather.gov/gridpoints/EWX ...

javascripthtmljsonajaxapi

Tips on adjusting font size of material ui badge text in reactjs?

I am attempting to adjust the font size of the label within a material ui badge. The current method I am using, style={{ fontSize: "15" }}, only impacts its child element, which happens to be an icon. Sample Code: <Badge badgeContent={props.c ...

reactjsmaterial-ui

There is a vast expanse separating the header of the page and the navigation bar

Hello! I'm trying to figure out why there is a huge space between the top of the page and the navbar on this site: . I've included the CSS and HTML below. Any help would be greatly appreciated, thank you! HTML: <!DOCTYPE html> <html> ...

htmlcss