CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Kareem Etefy
Kareem Etefy

Reputation: 63

material ui (mui) button have incorrect styling

why do my MUI button components look like this instead of like the docs no external .css file or theme changes besides the ones listed I have the roboto font installed as well and working on the typography I want whatever changes I make to be global

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>

thanks for any help

Upvotes: 0

Views: 825

Answers (1)

Ricardo Ferreira
Ricardo Ferreira

Reputation: 86

Aren't you missing an import inside the component where the button is?

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

And I think the syntax for themes is wrong, you should be using MuiButton instead of Button inside components entry.

Upvotes: 1

Related Questions