Question

我正在使用带有React的功能组件，我需要根据状态显示SVG图标，我想加载相关的图标

因此父级将仅显示通话：

<icon classes:... , state..></icon>

1-如何传递样式，如果样式不存在，并在子代中使用默认样式？

现在我像父母一样：

... createStyle
  IconSuccess: {
     fontSize: 20,
      width: 20,
    },
    IconWarning: {
      fontSize: 20,
      width: 20,
    },

但是我想要像：

 icon:{
  width:..
  font ..
  warning: { color}
  success: { color}
 }

then 

<IconChild state={state} classes={{ icon: itemStyle.icon}} />

这仅在我通过以下特定样式时才有效：

 <IconChild state={state} classes={{ iconWarning: itemStyle.iconWarning}} />


then in the childCOmponent I am doing smth like:


 const classes = useStyles(props);
 if( props.state == 1){
  return <className={`${classes.iconWarning}`} />
 }
 else{
  return  <className={`${classes.iconSuccess}`} />
 }

所以基本上，我试图了解如何创建一个我可以使用和传递的，真正通用的组件，并且需要一个状态来选择特定的图标以及特定的类

我需要HOC吗？或其他方法

Answer 1

据我了解，您想要：

重用一些常见的属性，例如width和fontSize。
自定义呈现其他属性，例如color。

然后这就是我的方法：

首先，为常用属性创建新样式。
第二，为每个状态的有条件使用创建新样式。
最后，使用类似classnames之类的东西来组合所有类。

所以这里的主要思想是：不再为每个项目使用一个类，而是为每个项目使用两个类。就是这样！

const useStyles = withStyles({
  commonProperty: {
    fontSize: '20px',
    width: '20px',
  },
  successOnlyProperty: {
    color: 'green'
  },
  warningOnlyProperty: {
    color: 'orange'
  },
});

将材料ui样式传递给组件-反应

1 个答案: