React add custom property to component

Question

I am trying to create a variation of an MUI component. This all works fine, until I run the build command, and then it fails. I have a few variations of this, but basically I just want a custom property or attribute that changes some element of the component.

// RoundBox.js
import { styled } from "@mui/material/styles";
import MuiBox from "@mui/material/Box";

export const RoundBox = styled(MuiBox)(({roundish }) => ({
  borderRadius: roundish ? 5 : 15
}));

Using that component in another file like this:

<RoundBox>
 ... rounded content ...
</RoundBox>

<RoundBox roundish>
 ... very rounded content ...
</RoundBox>

This renders correctly, when I am running it in developer mode, however, when I try to build it, I am getting errors like this:

Type error: Type 'true' is not assignable to type 'ResponsiveStyleValue<MinWidth<string | number> | MinWidth<string | number>[] | undefined> | ((theme: Theme) => ResponsiveStyleValue<MinWidth<...> | MinWidth<...>[] | undefined>)'.

Balázs Édes · Accepted Answer · 2022-09-02 18:31:50Z

1

I'm writing this from memory, but you need to tell the compiler the type of the props you expect:

type RoundBoxProps = {
  roundish: boolean
}

export const RoundBox = styled<RoundBoxProps>(MuiBox)(({ roundish }) => ({
  borderRadius: roundish ? 5 : 15
}));

You could also simplify this by an inline type, if you expect just a few props:

export const RoundBox = styled<{ roundish: boolean }>(MuiBox)(({ roundish }) => ({
  borderRadius: roundish ? 5 : 15
}));

answered Sep 2, 2022 at 18:31

Balázs Édes

13.9k7 gold badges60 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Емил Цоков · Accepted Answer · 2022-09-02 18:44:23Z

0

You can do it like

const RoundBox = styled(MuiBox)(({roundish}: {roundish: boolean}) => ({
  borderRadius: roundish ? 5 : 15
}));

or

<MuiBox sx={{ borderRadius: 5 }} />
<MuiBox sx={{ borderRadius: 15 }} />

answered Sep 2, 2022 at 18:44

Емил Цоков

7309 silver badges20 bronze badges

Collectives™ on Stack Overflow

React add custom property to component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related