Question

我的代码如下（使用CSS模块）：

return (
  <div>
    <LandingPage className={styles.hidden} />
  </div>
);

哪个不起作用（即不将CSS应用于元素）。但是，返回

  <div>
    <div className={styles.hidden}>
      <LandingPage />
    </div>
  </div>

工作得很好。为什么在自定义元素上应用className会导致忽略该类？

Answer 1

此处className不会直接应用于LandingPage组件，它基本上是从父组件传递到子组件的props值，您需要将该类应用于LandingPage组件。

像这样：

<LandingPage customClassName={styles.hidden} />

内部LandingPage：

render(){
   console.log('class name', this.props.customClassName);
   return(
       <div className={this.props.customClassName}>
           {/* other elements */}
       </div>
   )
}

永远记住道具是一个对象，无论您从父传递的数据是什么，都只会成为道具值的一部分，您需要在子组件的某处使用该数据。

检查console，它将打印您从父母传递的正确姓名。

在自定义React元素上添加样式属性似乎无法获取

1 个答案: