Customizing Material-UI styles with type overrides

Is there a way to change the MuiIconButton-root class when using MuiSvgIcon with the fontSizeSmall attribute?

import React from 'react'
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

const theme = createMuiTheme({
  overrides: {
    MuiSvgIcon: {
      fontSizeSmall: {
        padding: "5px"
      }
    }
  }
});

export default function Root(props) {
  return (
    <ThemeProvider theme={theme}>
      <MyApp />
    </ThemeProvider>
  )
}

I managed to adjust the MuiSvgIcon, but I'm struggling to modify the MuiButtonBase-root. How can I override the padding value of MuiIconButton-root specifically when using a small MuiSvgIcon?

Referencing the image below:

https://i.stack.imgur.com/aG2P6.png

cssreactjsstylesmaterial-ui

Answer №1

A method to customize the root style is by utilizing a button from Material UI as an example. Following are the necessary files needed:

npm install @material-ui/styles
npm install @material-ui/core

Then, proceed with the following code:

//additional react imports
import { makeStyles, withStyles } from '@material-ui/core/styles'; //essential for style modifications
import Button from '@material-ui/core/Button'; //basic button component

const useStyles = theme => ({
    root: {
        '& > *': {
            margin: theme.spacing(1),
        },
    },
    button: {
        fontSize: "16px",
        fontWeight: "600",
        textAlign: "center",
        border: "none",
        cursor: "pointer",
        color: "#fff",
        backgroundColor: "#C8385E"
    }
});

class Welcome extends React.Component {
    render() {
        return (<div>
            <Button
                className={classes.button}
                variant="contained" component="span">
                BUTTON TEXT
            </Button>
        </div>);
    }
}

export default withStyles(useStyles)(Welcome);

The above demonstration illustrates how to export and integrate styles within a class using "withStyles". By modifying the styles in the "useStyles", you can visualize these changes reflected on the display.

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

Concerning dilemma with a div element

I am using 2 different partial views in my main view: <div class="col-md-6"> @Html.Action("Chart", "Teams") </div> <div class="col-md-6"> @Html.Action("SeriesWinsChart", "Teams") </div> <div class="next-game"> & ...

htmlcss

What is causing my images to fail loading on IE but display properly on other browsers?

I am facing an issue where the images for my css header class load correctly in Chrome and FF, but not in IE8 or 7. Can anyone help me figure out what I may be missing? Below is the css class code that I am using: .TBox { color:#333333; font-size ...

c#htmlcssxml

What is the definition of a type that has the potential to encompass any subtree within an object through recursive processes?

Consider the data structure below: const data = { animilia: { chordata: { mammalia: { carnivora: { canidae: { canis: 'lupus', vulpes: 'vulpe' } } } } }, ...

javascriptreactjstypescript

What is the most effective way to insert links (or utilize any other HTML/JSX) within the label of the Material-UI <Checkbox ... label="string"/> element?

I need some advice on how to include custom JSX in the label of the Checkbox component. <Checkbox label="I agree to the Terms of Use & Privacy Policy" /> My goal is to have the label display as "I agree to the [Terms of Use] & [Privacy ...

material-ui

Prevent a div from being displaced by the transform property once it reaches the window's border

Is it possible to prevent the viewer I created using CSS transform from moving when its borders reach the window borders? Should I consider using a different method instead? If you'd like to see the code, you can check it out here. var x=0, y=0 ...

javascriptjquerycssbordertransform

Stopping all animations with JQuery animate()

I have a question about stopping multiple animations. Here's some pseudocode to illustrate my situation: CSS #div1 { position: absolute; background-image: url("gfx/cat.jpg"); width: 60px; height: 70px; background-size: 50%; b ...

javascriptjquerycss

Building a React Typescript service with axios functionality

When creating a service and calling it from the required functional component, there are two different approaches you can take. 1. export const userProfileService = { ResetPassword: async (userId: string) => { var response = await http.get ...

javascriptreactjstypescriptreact-hooksjavascript-objects

My jQuery carousel seems to be malfunctioning. Check out the issue here on JSFiddle

I found this amazing resource for jQuery carousel functionality: If you'd like to see it in action, check out the JSFiddle demo I created: http://jsfiddle.net/svQpc/ However, I've encountered a small issue with the Horizontal version of the car ...

jqueryhtmlcss

Unlocking Worldwide Availability for Identifying URL Parameters

Is there a way to obtain global access to the current URL ID params? I am facing difficulty accessing the current URL ID in a child component within React. The ID is essential for querying a MongoDB database in my ChecklistTool component. Typically, I wou ...

javascriptreactjsmongodbexpress

Optimizing web layouts to fit on a single page is the most effective

Struggling to create a print layout for my web page that seamlessly transitions from the digital realm to the physical world. Utilizing HTML and CSS has presented challenges in aligning the "digital" design with a "real printable" page due to uncertainties ...

htmlcssprinting

Transferring information among React Native screens (From Screen A to Screen B to Screen C)

Imagine this particular situation. Essentially, a MaterialTopTabNavigator is nested within a StackNavigator. The challenge at hand is how to effectively pass data from a function all the way to the MaterialTopTabNavigator. Keep in mind that the data has t ...

reactjsreact-nativeparameter-passingreact-navigation

"Can anyone tell me why my index.html file isn't recognizing the style.css file located in my css directory

In the directory structure below, I have the following files: mywebsite/ ├── css/ │ ├── style.css │ ├── index.html This is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

htmlcssxampp

How can I trigger a CSS animation to replay each time a button is clicked, without relying on a timeout function?

I am having trouble getting a button to trigger an animation. Currently, the animation only plays once when the page is refreshed and doesn't repeat on subsequent clicks of the button. function initiateAnimation(el){ document.getElementById("anima ...

javascripthtmlcssanimation

Using React JS to automatically execute an event based on a specific state value

Is there a way to initiate an action from a main component when the child component's state reaches a specific value? Let's consider a scenario where I have a Parent component and a Child component, with the parent's state containing active ...

javascriptreactjs

"Encountering issues with getStaticPaths not generating any paths

I have a folder named data which contains a file called events.ts: export const EventsData: Event[] = [ { name: 'School-Uniform-Distribution', images: ['/community/conferences/react-foo.png', "/community/conferences/react ...

javascriptreactjstypescriptnext.js

Increase ng-grid row height dynamically based on content without any external plugins or reliance on jQuery

I came across a similar question on this topic at Angular ng-grid row height However, none of the solutions provided there meet my requirements. If I use CSS to fix the issue, it impacts the page's responsiveness and disrupts ng-grid's header fu ...

javascriptcssangularjsng-gridrow-height

The background image seems to be malfunctioning

I've been attempting to recreate a similar design to this website, and while most of it is working smoothly, I'm encountering an issue with using ::before to add a background image as desired. Below is the code snippet in question: /* Section ...

htmlcsscss-selectorsbackground-image

Mixing box-shadow and blur filters can result in unusual artifacts appearing in Webkit browsers

Recently, I encountered an intriguing and frustrating bug in WebKit browsers. Consider a scenario where there is a parent DIV (let's say .wrapper) and a child DIV (.main). You apply a box-shadow on the .main DIV and a blur filter on the .wrapper DIV. ...

javascriptjqueryhtmlcss

Puzzled by the CSS Box Model - There's a piece of the puzzle I

Check out my simplified fluid layout right here at this link. I've been trying to figure out why the alignment between the right column and the header above it seems off, even though there's no padding involved. Both have the same border styles, ...

csslayout

Two objects precisely located in the same spot yet not visible simultaneously

There are two elements here. One is a transparent button, and the other is an image positioned behind it. The background property didn't work for me, so I attempted different variations without success: .top-container > button { background-ima ...

htmlcsscss-positionbackground-image