Can't type props of MUI Button

user_980799 0
Viewed 34
import * as React from "react";
import { styled } from "@mui/material/styles";
import MuiButton from "@mui/material/Button";
import Slider from "@mui/material/Slider";

interface Props {
  type: "primary" | "secondary";
}

export const MySlider = styled(Slider)<Props>(
  (props) => `
  color: ${props.type === "primary" ? "red" : "blue"};
`
);

export const MyButton = styled(MuiButton)<Props>(
  (props) => `
  color: ${props.type === "primary" ? "green" : "gold"};
`
);

export default function App() {
  return <MyButton type="primary">hello</MyButton>;
}

props is getting typed properly for the Slider component, but props gets typed to never for the Button component - anyone knows why?

https://codesandbox.io/s/funny-bose-xtx52q?file=/src/App.tsx

material-ui typescript
1 Answers

type - is a reserved attribute for a button element, you are trying to override the type, therefore throws type error. If you will change key of interface typeprops (or other name) instead of type error will be gone.

enter image description here

Component

import * as React from "react";
import { styled } from "@mui/material/styles";
import MuiButton from "@mui/material/Button";
import Slider from "@mui/material/Slider";

interface Props {
  typeprops: "primary" | "secondary";
}

export const MySlider = styled(Slider)<Props>(
  (props) => `
  color: ${props.typeprops === "primary" ? "red" : "blue"};
`
);

export const MyButton = styled(MuiButton)<Props>(
  (props) => `
  color: ${props.typeprops === "primary" ? "green" : "gold"};
`
);

export default function App() {
  return <MyButton typeprops="primary">hello</MyButton>;
}

Edit dazziling-code

user_155451160
Related