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 correctly typed for the Slider component, but strangely typed to never for the Button component - does anyone know why?
https://codesandbox.io/s/funny-bose-xtx52q?file=/src/App.tsx