英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论