Home > Enterprise >  Can't type props of MUI Button
Can't type props of MUI Button

Time:07-23

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?

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

  • Related