Material UI cant use Props

Question

I am trying to use the Checkbox from Material UI.

But for some reason I cant use the normal props such defaultChecked or size="small". When I do I get the error TS2769: No overload matches this call

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "disabled" | ... 8 more ... | undefined; ... 6 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>): Element | null', gave the following error.
    Property 'component' is missing in type '{ defaultChecked: true; }' but required in type '{ component: ElementType<any>; }'.
  Overload 2 of 2, '(props: DefaultComponentProps<SvgIconTypeMap<{}, "svg">>): Element | null', gave the following error.
    Type '{ defaultChecked: true; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "disabled" | "action" | ... 7 more ... | undefined; ... 6 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>'.
      Property 'defaultChecked' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "disabled" | "action" | ... 7 more ... | undefined; ... 6 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>'.
    10 |     return (
    11 |         <div>
  > 12 |             <CheckBox defaultChecked/>
       |             ^^^^^^^^^^^^^^^^^^^^^^^^^^
    13 |         </div>
    14 |     );
    15 | }

This is driving me mad. I can use it on for example the Box element from Material UI. And I can use for example style ={{display: "flex", width: "100px", height: "100px", borderRadius: "50%" }} in the Checkbox and it will work.

I have had quite a lot of problems with Material UI for example this post I did yesterday and some times it just starts working without it feeling like I did anything. I have no clue why Box started working.

If it is of any help. This is code crashes. The Test rout is the only relevant part. But I will add in the entire app in case there is something weird there. And the only part that is not working is the Test route.

import * as React from "react";
import {CheckBox} from "@mui/icons-material";


export default function Test() {

    return (
        <div>
            <CheckBox defaultChecked/>
        </div>
    );
}

import * as React from "react";
import {
  ChakraProvider,
  Box,
  VStack,
  Grid,
  theme,
 
} from "@chakra-ui/react";


import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import LogIn from "./components/LogIn";
import Home from "./components/Home";
import SignUp from "./components/SignUp";
import Strengths from "./components/statsPages/Strength";
import Stamina from "./components/statsPages/Stamina";
import Techniques from "./components/statsPages/Technique";
import Progress from "./components/Progress";
import Information from "./components/Information";
import RecordClimb from "./components/RecordClimb";
import History from "./components/History";
import Test from "./components/Test";

declare global {
  var topGrade: String;
  var currentGrade: String;
}
export const App = () => (
  <ChakraProvider theme={theme}>
    <Box
      textAlign="center"
      fontSize="xl"
      backgroundColor={"blackAlpha.800"}
      backgroundSize={"cover"}
    >
      <Grid minH="100vh" p={3} padding={0}>
        <VStack spacing={8} minH="100vh" fontFamily={"serif"}>
          <Router>
            <Routes>
              <Route path="/" element={<LogIn />} />
              <Route path="/home" element={<Home />} />
              <Route path="/test" element={<Test />} />
              <Route path="/history" element={<History />} />
              <Route path="/signUp" element={<SignUp />} />
              <Route path="/strength" element={<Strengths />} />
              <Route path="/endurance" element={<Stamina />} />
              <Route path="/technique" element={<Techniques />} />
              <Route path="/progress" element={<Progress />} />
              <Route path="/recordNewClimb" element={<RecordClimb />} />
              <Route path="/information" element={<Information />} />
            </Routes>
          </Router>
        </VStack>
      </Grid>
    </Box>
  </ChakraProvider>
);

This is my package.json

{
  "name": "your-climb",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/react": "^2.4.9",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.11.16",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^28.1.8",
    "@types/node": "^12.20.55",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@types/react-router": "^5.1.20",
    "framer-motion": "^6.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^3.11.0",
    "react-scripts": "5.0.1",
    "react-router-dom": "^6.8.0",
    "typescript": "^4.9.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

Cause you're importing CheckBox icon. You should import Checkbox component like this:

import { Checkbox } from '@mui/material'

style prop works with icons too.