英文:
Issue when creating custom styled Mui v5 component with custom props
问题
我正在尝试使用 MUI 的 styled 函数创建一个样式化组件。
// 导入
import styled from '@mui/system/styled';
import Select, { SelectChangeEvent, SelectProps } from '@mui/material/Select';
// 扩展属性
interface SelectComponentAddedProps extends SelectProps {
bool: boolean;
}
// MUI 样式化组件
// 为选择组件添加样式
export const StyledSelect = styled(Select)<SelectComponentAddedProps>(({ theme, bool }) => ({
width: bool ? 'fit-content' : 300,
textAlign: 'start',
margin: '5px',
fontWeight: 800,
}));
// 渲染中的组件
<StyledSelect
variant={variant}
labelId='select-label'
name={name}
disabled={disabled}
value={value}
renderValue={(value: unknown) => {
if (typeof value === 'string') {
return renderValue(name, value, options.length);
}
}}
onChange={onChangeFn}
displayEmpty
disableUnderline
>
我收到以下错误消息：
React 不认识 DOM 元素上的
disableUnderline属性。如果你有意让它出现在 DOM 中作为自定义属性，请将其拼写为小写的disableunderline。如果你是从父组件意外传递它，请从 DOM 元素中删除它。
如何能够创建一个带有自定义属性的样式化组件，使其与组件的基本属性兼容？
英文:
I am trying to created a styled component using the styled funcion from mui
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// Imports
import styled from '@mui/system/styled';
import Select, { SelectChangeEvent, SelectProps } from '@mui/material/Select';
// Extended props
interface SelectComponentAddedProps extends SelectProps {
bool: boolean;
}
// Mui Styled Component
// Style for the select component
export const StyledSelect = styled(Select)<SelectComponentAddedProps>(({ theme, bool }) => ({
width: bool ? 'fit-content' : 300,
textAlign: 'start',
margin: '5px',
fontWeight: 800,
}));
// Component in render
<StyledSelect
variant={variant}
labelId='select-label'
name={name}
disabled={disabled}
value={value}
renderValue={(value: unknown) => {
if (typeof value === 'string') {
return renderValue(name, value, options.length);
}
}}
onChange={onChangeFn}
displayEmpty
disableUnderline
>
<!-- end snippet -->
and I am getting the follwoing error massage
> Blockquote react-dom.development.js:86 Warning: React does not recognize the disableUnderline prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase disableunderline instead. If you accidentally passed it from a parent component, remove it from the DOM element.
How to be able to create a styled component with my custom props that will be compatible with the basic props of the component ?
答案1
得分: 2
// 在你的样式组件中使用“bool”属性，但不要将其传递到Select组件
export const StyledSelect = styled(Select, {
shouldForwardProp: (prop) => prop !== 'bool', // <----
})<SelectComponentAddedProps>(({ bool }) => ({
width: bool ? 'fit-content' : 300,
textAlign: 'start',
margin: '5px',
fontWeight: 800,
}));
// 在你的基础组件中：
<StyledSelect
// ...
bool={/*...*/} // 将“bool”属性传递给样式组件
/>
英文:
If your styled component is dependent on a prop from your base component to generate its styles, then you need to pass that prop to your styled component as well. However, you don't want to propagate it further into the Select component.
// Use the "bool" prop in your styles, but don't forward it to the Select component
export const StyledSelect = styled(Select, {
shouldForwardProp: (prop) => prop !== 'bool', // <----
})<SelectComponentAddedProps>(({ bool }) => ({
width: bool ? 'fit-content' : 300,
textAlign: 'start',
margin: '5px',
fontWeight: 800,
}));
// In your base component:
<StyledSelect
// ...
bool={/*...*/} // Pass the "bool" prop to the Styled Component
/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论