英文:
How to create a Mui styled clip which support children
问题
以下是翻译好的内容：
如何创建一个支持单一声明和嵌套声明的样式芯片？我有以下的 **MUI v5** 样式芯片。
```tsx
interface StyledModalChipProps {
theme: Theme
children: React.ReactNode
}
export const StyledModalChip = styled(Chip)<StyledModalChipProps>(
({theme}) => ({
margin: 5,
padding: 2,
borderRadius: 10,
height: 'fit-content',
display: 'flex',
justifyContent: 'center',
textAlign: 'center',
alignItems: 'center',
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.main,
// 样式化标签
'& .MuiChip-label': {
fontWeight: 700,
fontSize: '1.1rem',
},
})
)
也修复这个问题，我希望能够在两种不同的情况下使用它，就像这样。
// 情况1 直接使用标签
<StyledModalChip label="自定义数据" />
// 情况2 嵌套标签和图标
<StyledModalChip>
<LocalHospitalIcon />
<Typography>前往急诊</Typography>
</StyledModalChip>
当前的样式出现错误：
Type 'Element' is not assignable to type 'null | undefined'.ts(2322)
Chip.d.ts(24, 5): The expected type comes from property 'children' which is
declared here on type 'IntrinsicAttributes & { avatar?: ReactElement<any,
string
|
JSXElementConstructor<any
>> | undefined; children?: null | undefined; ... 12 more ...; variant?:
OverridableStringUnion<...> | undefined; } & CommonProps & Omit<...> &
MUIStyledCommonProps<...>'</any,
<details>
<summary>英文:</summary>
How to create a styled chip that supports both single declaration and nested declaration?. I have the following **MUI v5** styled chip.
```tsx
interface StyledModalChipProps {
theme: Theme
children: React.ReactNode
}
export const StyledModalChip = styled(Chip)<StyledModalChipProps>(
({theme}) => ({
margin: 5,
padding: 2,
borderRadius: 10,
height: 'fit-content',
display: 'flex',
justifyContent: 'center',
textAlign: 'center',
alignItems: 'center',
color: theme.palette.primary.contrastText,
backgroundColor: theme.palette.primary.main,
// Style the label
'& .MuiChip-label': {
fontWeight: 700,
fontSize: '1.1rem',
},
})
)
Fix this as well, and I want to be able to use it in two separate cases like this.
// Case 1 directly with labe
<StyledModalChip label="Custom Data" />
// Case 2 nested label with icon
<StyledModalChip>
<LocalHospitalIcon />
<Typography>Go to emergerny</Typography>
</StyledModalChip>
The current style is error out showing:
Type 'Element' is not assignable to type 'null | undefined'.ts(2322)
Chip.d.ts(24, 5): The expected type comes from property 'children' which is
declared here on type 'IntrinsicAttributes & { avatar?: ReactElement<any,
string
|
JSXElementConstructor<any
>> | undefined; children?: null | undefined; ... 12 more ...; variant?:
OverridableStringUnion<...> | undefined; } & CommonProps & Omit<...> &
MUIStyledCommonProps<...>'</any,
答案1
得分: 1
正如您在下面的图像中所看到的，Mui的chip不支持children：Mui Chip APIs 参考
而且明确指出，如果您想使用children，则需要使用component属性。
如果您需要更改
children的结构，请使用component属性。
<StyledModalChip>
<LocalHospitalIcon/>
<Typography>前往急诊</Typography>
</StyledModalChip>
因此，您可以使用label来解析children，这意味着您可以将更复杂的JSX甚至其他组件传递作为标签。有些类似这样：
export const StyledModalChip = styled(({ children, ...props }: StyledModalChipProps) => (
<Chip label={children} {...props} />
))(({ theme }) => ({
// 您的样式。
}));
现在您可以使用这段代码：
<StyledModalChip>
<LocalHospitalIcon/>
<Typography>前往急诊</Typography>
</StyledModalChip>
英文:
As you can see in the down below image, Mui chip doesn't support children:- Mui Chip APIs ref.
And also it clearly said that if you want to use children. Then, you need to the component.
> Use the component prop if you need to change the children structure.
<StyledModalChip>
<LocalHospitalIcon/>
<Typography>Go to emergerny</Typography>
</StyledModalChip>
So, you can use label to parse children. which means you can pass more complex JSX or even other components as the label. Some things like this:
export const StyledModalChip = styled(({ children, ...props }: StyledModalChipProps) => (
<Chip label={children} {...props} />
))(({ theme }) => ({
// your styles.
}));
Now you can use this code:
<StyledModalChip>
<LocalHospitalIcon/>
<Typography>Go to emergerny</Typography>
</StyledModalChip>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论