Question

我正在处理进度条组件，我需要将自定义类传递给它。我已经有了一个-webkit-progress-value类，如下所示。

&::-webkit-progress-value {
        background-color: currentColor;
        border-bottom-left-radius: 0;
        border-right: 1px solid #fff;
        border-top-left-radius: 0;
      }

我有一个background: something属性，我需要将它放在类中并作为自定义prop类值传递给组件但我很困惑在哪里创建该类，因为我已经有一个上面的值。

我的scss文件如下所示：

:local {
  .progress-bar {
    background: #d3d4d5;
    ....more properties....

    &:focus {
      outline: none;
    }

    &[value] {
       ....properties....

      &::-webkit-progress-bar {
       ....properties....
      }

      &::-webkit-progress-value {
        background-color: currentColor;
       ....properties....
      }

      &::-ms-fill {
       ....properties....
      }
    }

    &[value='100'],
    &[value='0'] {
      &::-webkit-progress-value {
        background: currentColor;
       ....properties....
      }

      &::-ms-fill {
       ....properties....
      }
    }
  }
}

我试图在本地

之外创建一个

.test{
  background: something;
}

并将其传递给组件<component prop1={value} prop2={value} className={"test"} />组件正在使用该类，但类属性未应用，因此想知道是否没有正确创建类。

我做错了什么？

更新：组件代码如下所示：

const cx = classNames.bind(styles);

const propTypes = { 

..props here...

}

const component = ({ ...props...}) => {
  const classes = cx([
    'progress-bar',
    heightSize,
    customProps.className,
  ]);

  return (
    <progress
      {...customProps}
      style={{ color: customProps.color }}
      className={classes}
      max={100}
      value={normalizedValue}
      aria-valuemax={100}
      aria-valuemin={0}
      aria-valuenow={normalizedValue}
      tabIndex="-1"
    />);
};

此外，我看到类属性在开发人员工具中被淘汰。

将自定义类传递给组件

0 个答案: