The styling of Material UI (MUI) buttons is not displaying correctly

Why are my MUI button components displaying differently than the documentation? I have not made any external .css file or theme changes except for the ones listed. I have also installed the Roboto font and configured the typography. I want any changes I make to be applied globally.

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import CssBaseline from "@mui/material/CssBaseline";
import { createTheme, ThemeProvider } from "@mui/material";
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";

import "./index.css";
import Home from "./views/Home";
import Login from "./views/Login";
import Register from "./views/Register";

const theme = createTheme({
  components: {
    Button: {
      defaultProps: {
        fontSize: 1000,
      },
    },
  },
});
const App = () => {
  return (
    <>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <BrowserRouter>
          <Routes>
            <Route path="/" exact element={<Home />} />
          </Routes>
        </BrowserRouter>
      </ThemeProvider>
    </>
  );
};
export default App;
<Button variant="contained" style={{ width: 150, height: 50 }}>
          I'm a Doctor
</Button>

Thank you for any assistance.

Answer №1

Could it be that you forgot to include an import statement within the component housing the button?

import { Button } from '@mui/material';

Furthermore, it seems that the theme syntax is incorrect. You should consider utilizing MuiButton instead of Button in the components entry.

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

The positioning of images on the fabricjs canvas seems to be unreliable and inconsistent

When trying to place a series of 4 images at specified coordinates in fabricjs, I am facing inconsistencies with their placement upon page load. Refreshing the page usually resolves the issue, but I want to prevent this from happening altogether. If anyon ...

Equal vertical alignment in the center using flexbox

My flexbox layout is set up as shown in the code snippet below: html { height:100%; width:100%; } body { display:flex; flex-direction:column; align-items:stretch; height:100%; width:100%; margin:0; background-color:grey; } header { b ...

Is there a way to launch QTP from JavaScript without relying on ActiveXObject?

Is there a way to call QTP from JavaScript without relying on ActiveXObject? I would appreciate any guidance on how to accomplish this task. Thanks in advance, Ramya. ...

Discover the unseen: The ultimate guide to detecting visible objects in a (deferLoad) event

I'm utilizing the (deferLoad) method to load an image gallery in a more controlled manner. Is there any event available that can inform me about which items are currently visible? The main goal is to load a set of data along with an image path, and t ...

I am encountering a JSON parsing error while trying to implement jQuery autocomplete, despite using a local array

I'm attempting to implement the jQuery autocomplete feature on a WordPress website. My ultimate goal is to link the input field to an ajax request that will retrieve data from a database. However, I've encountered an unusual error when trying to ...

Modify the characteristics of a bootstrap button depending on certain conditions

I am working on enhancing a bootstrap dropdown button by implementing a functionality where it will be disabled if certain conditions are met. Below is the current code snippet for the button: <> <DropdownButton title={fixtureDetails.h ...

Unable to open modals in Bootstrap using jQuery script: modal not popping up

My attempt to create functionality for two buttons and two modals - reserve a campsite (id="reserveButton" should open id="reserveModal") and Log in (id="loginButton" should open id="loginModal") is not working. I ha ...

`Enhance Image with a Fresh Hue`

Let me explain my dilemma: I'm dealing with a two-tone png image - one tone is black and the other is transparent. Right now, I'm relying on the background color attribute to dynamically change the color of the transparent section. However, I ...

Error: Unable to execute function abc, it is not defined as a function in this context

Having trouble with a fronted or JavaScript issue where it can't find the defined function in the file. I'm working on integrating Apple Pay and need to call the back-end API based on a specific event. Here is my code. ACC.payDirect = { _autoload ...

What is the best way to send a function along with personalized data?

Currently, I am working on a project using node.js with socket.io. I am looking for a way to have socket.on() use a unique callback function for each client that joins the server. Here is my current technique: I have created a simple JavaScript class whi ...

Enclose each set of objects, such as text, within a separate div, except for div elements

Is there a way to wrap each immediate group of objects that are not contained in a div with a wrap class? Input: var $code = 'Lorem Ipsum <p>Foo Bar</p> <div class="myclass"></div> <p>Foo Bar</p> <div clas ...

Tips for sending form data from ReactJS to controller in ASP.NET MVC:

Seeking help with React and ASP.NET integration. I am attempting to create a form in ASP.NET using React, but encountering issues when trying to pass form data from ReactJS to an MVC ASP.NET controller. Below is the code that I have been working on. Any su ...

React JS for loop not displaying any output

I am trying to create a component that loops from 0 to the value entered as a prop. if (props.number !== "" && props.toPow !== "") { for (let i = 0; i < props.toPow; i++) { return ( <div> & ...

Encountered an issue when trying to generate a shader cache entry- there was an error when attempting to locate an

Today, I decided to write a basic Python script utilizing Selenium that would identify an element by its Css selector. My target? The input field on the Google webpage, specified by input[name=q] Upon running the script, Chrome opened as expected but prom ...

Consistently encountering the message 'Error: timeout of 2000ms exceeded' while using Selenium

Good morning, Currently, I am in the process of learning how to use Selenium with JavaScript (specifically using Mocha). I have created a very basic test that is causing some issues during runtime. Whenever I run the test, a new instance of Chrome opens a ...

Boost Page Speed with Angular

Currently, I am working on a project using Angular and encountered an issue with testing the page speed on GTmetrix. Despite generating the build with the command ng build --prod--aot, the file size is 1.9mb, leading to a low speed in GTmetrix's analy ...

Changing the website address | Node.js | Express

Is there a way to redirect incoming requests to different endpoints depending on a query parameter in the request? For instance, http://localhost:9000/?category=xyz&param1=...&param2=... The category value can be any of [abc, ijk, pqr, xyz]. Gi ...

What could be causing my right-floating elements to shift more towards the left with each occurrence?

After following a todo list tutorial, everything was running smoothly until I decided to add some styling to it. I placed a Font Awesome trash can icon inside a button with the class "remove." Essentially, I removed all the styles from the button, leaving ...

Obtaining Position Coordinates of an Element Linked to an Object in AngularJS $scope

Imagine a website with a left column containing filters like checkboxes and text fields. The main column displays items that are filtered based on the values provided in the left column. When a user changes a value in the filter column, a small floating el ...

What is the relationship between directives, templates, and ViewContainers in Angular?

I have implemented a basic functionality in my component where numbers are injected after a delay using a custom directive called *appDelay It is known that the Angular syntax hints with * will de-sugar into something like this: <ng-template ...> .. ...