Material UI 无法使用 Props.

huangapple go评论141阅读模式
英文:

Material UI cant use Props

问题

I can provide a translation of the non-code parts of your text:

"I am trying to use the Checkbox from Material UI.
But for some reason I can't use the normal props such as defaultChecked or size="small".
When I do, I get the error TS2769: No overload matches this call.

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 sometimes 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 code crashes. The Test route is the only relevant part. But I will add the entire app in case there is something weird there. And the only part that is not working is the Test route."

Please note that I've provided the translation for the non-code content, as per your request. If you have any specific questions or need assistance with the code itself, please let me know.

英文:

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"
    ]
  }
}

答案1

得分: 2

因为你正在导入CheckBox图标。你应该像这样导入Checkbox组件:

import { Checkbox } from '@mui/material'

style属性也适用于图标。

英文:

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

import { Checkbox } from '@mui/material'

style prop works with icons too.

huangapple
  • 本文由 发表于 2023年4月10日 23:00:31
  • 转载请务必保留本文链接:https://go.coder-hub.com/75978208.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定