如何解决ForwardRef(Grid)组件xs/sm/lg属性类型警告？

问题原因 #

你遇到的以下警告，是因为给ForwardRef(Grid)组件的xs、sm、lg属性传递了字符串类型的值，但组件要求这些属性的类型必须是number或boolean：

Warning: Failed prop type: Invalid prop lg supplied to ForwardRef(Grid), expected one of type [number, boolean].
Warning: Failed prop type: Invalid prop sm supplied to ForwardRef(Grid), expected one of type [number, boolean].
Warning: Failed prop type: Invalid prop xs supplied to ForwardRef(Grid), expected one of type [number, boolean].

修改方案 #

只需要把GridProps中xs、sm、lg的值从字符串改成数字（去掉引号）即可，不会影响页面布局：

const GridProps = {
    container: true,
    xs: 12, sm: 7, lg: 9, // 去掉引号，将字符串转为数字
}

export default function Devices() {
    const urlParams = useParams();

    return (
        <Grid className={classes.containerStyle}>
            
            <Grid className={classes.widthAndHeight}>
                <Grid {...GridProps}>
                    
                </Grid>
            </Grid>
        </Grid>
    );
}

说明 #

Grid组件的响应式属性（xs/sm/md/lg/xl）接受数字（代表占据的列数，0-12之间）或布尔值（true表示占满整行），将字符串数字转为数字后，组件的布局逻辑完全不变，只是类型符合了PropTypes校验，警告自然会消除。

内容的提问来源于stack exchange，提问作者Paul