Enhance your UI experience with a beautifully styled button using Material-

I was using a Material UI button with a purple background.

<Button
      component={Link}
      to={link}
      style={{
        background: '#6c74cc',
        borderRadius: 3,
        border: 0,
        color: 'white',
        height: 48,
        padding: '0 30px',
        width: 200,
      }}>

Attempting to change it to a styled-component:

export const StyledButton = styled(Button)`
  background: #6c74cc;
  border-radius: 3;
  border: 0;
  color: white;
  height: 48;
  padding: 0 30px;
  width: 200px;
`;

However, the result is quite different. The background appears white and the text black, despite applying the same styles. Additionally, the width varies. How can I resolve this issue?

Click here to view the code (CodeSandbox)

javascriptcssreactjstypescriptstyled-components

Answer №1

If you are using material-ui, there are important things to keep in mind:

  1. Make sure to separate style properties with semi-colons ;

  2. In most cases, the styles will be overridden by built-in material-ui classes due to their higher specificity. To address this, use the && operator to apply styles on the same level of specificity.

  3. Additionally, setting the background on :hover is necessary to override material-ui styles.

By making these adjustments, your styled component will appear like this:

export const StyledButton = styled(Button)`
  && {
    background: #6c74cc;
    border-radius: 3px;
    border: 0;
    color: white;
    height: 48px;
    padding: 0 30px;
    width: 200px;
    margin-right: 20px;
    &:hover {
      background: #6c74cc;
    }
  }
`;

You can witness the changes in action on this CodeSandbox demo

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

ESLint error: EROFS read-only does not correspond to any directory

Can anyone help me with this issue? I am experiencing a problem when using Linux dual boot, but everything works fine when I use Windows. ERROR in [eslint] EROFS: read-only file system, open '/media/naufal/6878124278121004/Refactory/Skill-Test-Re ...

javascripthtmlcssreactjs

Vue-router is displaying only the root route

I've been working on vue-router for some time now, but I seem to have hit a roadblock. Despite going through numerous articles and documentation, I can't seem to find the solution. Even after reading multiple tutorials on using vue-router, I&apo ...

javascriptvue.jsvue-router

After each save, gulp-typescript is emitting errors, however, it works without any issues upon subsequent saves

I'm facing some uncertainty regarding whether the issue I'm encountering is related to gulp, typescript, or Angular 2. Currently, I am using Angular 2 Beta 6. Here is an example of my typescript gulp task: var tsProject = p.typescript.createPr ...

typescriptgulpangular

ClassSerializerInterceptor in NestJS does not show the _id field

I am encountering an issue with properly exposing the _id when using the Serializer. Here is my current setup: @UseInterceptors(ClassSerializerInterceptor) @SerializeOptions({ strategy: 'excludeAll' }) This is how I defined the Class: export cl ...

javascriptnode.jsmongodbmongoosenestjs

Tips on managing the onKeyUp event in a ReactJS form

Here is a simple JavaScript function called numericOdds implemented in home.js file: function numericOdds(e) { var valid = /^[1-9]{1}[0-9]{0,1}$/ var number = /^[1-9]{1}$ | ^[1-9]{1}[0-9]{1}$/ var lastValid = ''; var n; console.log(&apo ...

javascriptreactjs

Troubleshooting: Issues with Cypress typing input text on Material-UI and Formik in a React application

I have been experimenting with the login submit function using cypress. The login form I am testing is created with material-ui and formik. Unfortunately, I am unable to access the 'data-testid' props on Input when running the test. test code ...

reactjsmaterial-uicypressformik

The Material-UI Select component does not reflect changes after an onChange event

I've encountered this issue all over the internet, but no explanation seems to resolve it for me. Using Material-UI Select and traditional setState(...) in React (not using hooks). The core of my component is as follows: class MyComponent extends Co ...

javascriptreactjsmaterial-uistate

Can I assign a value from the tagModel to ngx-chips in an Angular project?

HTML code: <tag-input class="martop20 tag-adder width100 heightauto" [onAdding]="onAdding" (onAdd)="addInternalDomain($event)" type="text" Ts code: addInternalDomain(tagTex ...

angulartypescriptnpm

The toggle checkbox feature in AngularJS seems to be malfunctioning as it is constantly stuck in the "off"

I am trying to display the on and off status based on a scope variable. However, it always shows as off, even when it should be on or checked. In the console window, it shows as checked, but on the toggle button it displays as off Here is the HTML code: ...

javascripthtmlcssangularjstwitter-bootstrap

What is the best way to initialize cron in Next.js after a server restart without employing a custom server?

Is there a way to initiate cron in Next.js after a server restart without using a custom server? We are utilizing the Next API routes and I am looking for a way to trigger a function after running the npm start command, or alternatively, the npm run dev c ...

node.jsreactjsnext.jsbackendweb-deployment

Showcasing menu options in a double-column layout - MUI Menu

Just starting out with React. I'm using MUI menu to display items in two columns, but I've noticed a significant gap between the menu items when using grid display with repeat 2 and 1fr. display:'grid' , gridTemplateColumns : 'repe ...

cssreactjsmaterial-ui

Why does the styling on my <a> tags in the footer only take effect when I apply padding to the form above?

It seems that when styling the <a> tag for the list in the footer, no changes occur even if correctly applying the style. However, adding padding to the form in the main part of the code causes the links in the footer to show the change. To see this ...

htmlcss

Passing events value in Fullcalendar Plugin by utilizing a javascript function to format events in the Fullcalendar event format

Currently, I am utilizing the full calendar plugin to display data on a calendar from a workflow. The values needed for the events are obtained in a separate function and need to be passed as fullcalendar events. I am uncertain about how to retrieve these ...

javascriptjqueryjsonfullcalendar

SyntaxError: Encountered an unexpected token that is not jsonp, could it be trying to parse json instead?

As a newcomer to AJAX and Javascript, I am attempting to integrate them with an API following this structure: http://localhost:8088/JobPositionForDd: { "data": [{ "_id": "529dc2dfd0bf07a41b000048", "name": "Junior Android" }, { ...

javascriptjqueryjsonajax

Add the scss file to the vuejs component npm package only if certain conditions specified in the project are met

Creating css/scss themes for my Vue Components Npm package has been a focus of mine lately. This particular package is local and currently being tested using npm link. Both the Package and Project are utilizing webpack. index.js of Package import "./src ...

javascriptvue.jsnpmwebpack

What is the functionality of theme.spacing()?

I was looking at the material-ui document and noticed that it provides space between components. However, I am a bit confused about how width and height are being set here: width: theme.spacing(20), height: theme.spacing(15) Can you explain how theme.spa ...

reactjsreact-nativematerial-uimaterialize

What is the process for detaching and attaching click animations using the on() method?

I am encountering an issue with a recursive loop that executes a simple animation. These animations are controlled by the page load and clicking on controls .carousel_item. Click here for live sample JSFiddles for demonstration purposes Challenge: The pr ...

javascriptjqueryhtml

JavaScript functioning in Firefox but not Chrome

Here is the code snippet in question: $('#ad img').each(function(){ if($(this).width() > 125){ $(this).height('auto'); $(this).width(125); } }); While this code works correctly in Firefox, it seems to have i ...

javascriptjquerycss

Ways to modify client socket from JavaScript to PHP

Looking for a way to convert a client socket from JavaScript to PHP in order to receive data from the server socket? Check out the PHP socket Bloatless library here. This is an example of the Client Javascript code: <script> // connect to chat appl ...

javascriptphpwebsocket

Experiencing the "Module not found" issue while incorporating SCSS into React applications

I attempted to apply a SCSS style to my "Logo.js" component, but I am still unable to resolve the error that keeps popping up: ERROR in ./src/components/Logo/Logo.js 5:0-19 Module not found: Error: Can't locate 'logo.scss' in '/Users/a ...

javascriptreactjssass