Customizing Material-UI styles using makeStyles

Currently, I am in the process of building a small portfolio website. Despite my attempts to style an avatar using the makeStyles class, it seems that the Mui avatar root is overriding my desired styling.

I am wondering if there is a way to achieve this without resorting to the use of !important?

export const HomePage = () => {
    const classes = useStyles()
    return (
        <Grid container justifyContent="center">
            <Avatar className={classes.headerAvatar} src={avatar} alt="" />
        </Grid>
    )
}


export const useStyles = makeStyles(theme => ({
headerAvatar: {
        width: theme.spacing(13),
        height: theme.spacing(13),
        margin: theme.spacing(1)
    },
}))
cssreactjsmaterial-ui

Answer №1

As per the documentation, you have the option to customize the css style of the root class by utilizing the classes prop as demonstrated below:

export const HomePage = () => {
    const classes = useStyles()
    return (
        <Grid container justifyContent="center">
            <Avatar classes={classes} src={avatar} alt="" />
        </Grid>
    )
}


export const useStyles = makeStyles(theme => ({
  root: {
        width: theme.spacing(13),
        height: theme.spacing(13),
        margin: theme.spacing(1)
    },
}))

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

Issue encountered: missing photo data during the transfer of an image from ReactJS to MongoDB

When an image is uploaded to my website, it is sent to the backend for storage in MongoDB database. The base64 of the image is uploaded to the database, but occasionally the photo data retrieved can be "false". For example: (3) [{…}, {…}, {…}] 0 : p ...

node.jsreactjsmongodbpostget

The express session does not maintain persistence

While working on a React project, I decided to use Express for the backend. The virtual host for the Express server was set as http://mini-api.moonlab.ga. To send an HTTP Request to the Express server, I used Fetch: fetch("http://mini-api.moonlab.ga/ ...

node.jsreactjsexpresssession

What criteria does the browser use to select the media type for filtering CSS links?

One of the pages on my website includes a link to a stylesheet specifically for printing purposes. <link rel="stylesheet" href="../print.css" type="text/css" media="print" /> While most browsers ignore this link and its styles when rendering for sc ...

cssinternet-explorer-7media

Fixed Sidebar and Dynamic main content with top and bottom sections

Hello, I've been encountering an issue with coding the layout of my website. I want the sidebar to remain fixed regardless of screen size, while also making sure that the content area adjusts fluidly. The header is staying at the top as desired, but I ...

htmlcss

Tips for creating a dynamic rowspan feature in Ant Design React components

I'm currently working on creating a table with dynamic rowspan in Ant design (data will be dynamic). Here's the data I have: I want to display it like this. Can anyone offer some assistance? [{"col1":"temp1","col2":"1","col3":"x"}, {"col1":"t ...

reactjsantdant-design-pro

Rendering an Image File from Database Using React JS and Node JS

I am encountering a problem with displaying an image file from my mongodb database on my Profile and EditProfile component. The issue arises when I upload the file using the Editprofile component - it saves to the database successfully. However, when I try ...

javascriptnode.jsreactjsformidable

Properly managing mouseover events on a flipped div: tips and tricks

I created a div that flips when clicked using some HTML and CSS code. It works perfectly in Firefox 39 and Chrome 43. Here is the markup: <div class="flip-wrapper flippable-wrapper" id="fliptest-01"> <div class="flip-wrapper flippable ...

javascripthtmlcss

Having trouble with jQuery Animate when trying to change the background-color property?

So, I was experimenting with the jQuery .animate() function and decided to change the background color of a div based on how many pixels the user scrolled. Surprisingly, it didn't work as expected. After switching to the .css() function instead, every ...

javascriptjquerycssjquery-animate

When a page is being redirected using requestdispatcher in a filter, the CSS contents do not seem to be applying correctly

Upon evaluation of the condition, if it fails, I am utilizing a request dispatcher to redirect to another page. The redirection is successful, however, the CSS is not being applied to the new page. What could be causing this issue? public class RolePrivil ...

htmlcssjsfrichfacesservlet-filters

A guide on utilizing the useState hook to tally occurrences of elements within an array - specifically within React's useState hook

Currently, I am tackling an exercise that involves an array containing 10 objects. Each object has properties like txt and color, for example: arr = [{txt: "txt1", color: "red"}, {txt: "txt2", color: "green"}, {txt: ...

reactjsreact-hooksuse-state

Incorporating classes as props in components

I am in the process of transitioning my project from MUI version 4 to version 5. I have decided to follow the recommended patterns for using emotion and styled components, which means avoiding makeStyles() and withStyles(). Here is a snippet of my current ...

material-ui

Dropdown trigger changing image with AJAX

When a color is selected from one dropdown menu, it triggers a change in another dropdown menu and the image displayed. The ID for the dropdown affected by the color selection is "style_code". <script> function getState(val) { $.ajax({ ...

phphtmlcssnavigation

The styling of MUI components adapts when the Navigate component in React Router is initialized

Incorporating React Router into my application has led to an unexpected side-effect while implementing the <Navigate to="/"> component (which goes to <AthleteHomepage />) upon state change. Currently, I haven't set up dynamic sta ...

javascriptreactjsmaterial-uireact-router

Avatar component exhibits intermittent flickering behavior when hovering over it

I am currently working with the MUI library, where I have a setup with a Card component and an Avatar component within a Grid Item. The desired behavior is for the Card component to popup when hovering over the Avatar, but there seems to be some flickeri ...

reactjsmaterial-ui

What is the best way to initially conceal content and then reveal it only after an ajax call is made?

Currently, I have a situation where content is revealed after the callback function of a .js library (typed.js) executes. Here is the script I am using: Javascript $(function(){ $("#logo-black").typed({ strings: ["Nothing^450&Co^250.^500" ...

javascriptjqueryhtmlcssajax

Tips for correctly cloning a create-react-app repository and compiling it (with existing error) - (Git)

After developing on a different server, I am now looking to move my project to the live server. On the live server, I initiated the create react app using: create-react-app test Then, I navigated into the project and initialized it with git: cd test gi ...

javascriptgitreactjsnpmcreate-react-app

Swap out a div identifier and reload the page without a full page refresh

I am interested in learning how to dynamically remove a div id upon button click and then add it back with another button click to load the associated CSS. The goal is for the page to refresh asynchronously to reflect these changes. So far, I have successf ...

javascriptjqueryhtmlcssajax

Switch out the icons within a return statement in JavaScript

Help! I have 5 empty star icons (<StarBorderIcon/>) displayed for a product on the material-ui website. I need to replace them with filled star icons (<StarIcon/>) based on the rating entered into a function. I attempted to use replace(), but i ...

javascriptreactjsmaterial-ui

What's the best way to trigger an alert popup after calling another function?

Here are some HTML codes I've been working with: <button id="hide" onclick="hide()">Hide</button> <p id="pb">This paragraph has minimal content.</p> My goal is to have the paragraph hide first when the button is clicked, foll ...

javascripthtmlcssalert

Unused code splitting chunk in React production build would improve performance and efficiency of

When running the command npm run build, a build directory is generated with js chunks. I have observed an unfamiliar file named [number].[hash].chunk.js that does not appear in the list of entrypoints in the asset-manifest.json file. Instead, this mysteri ...

reactjstypescript