使用父组件样式文件中的父 class 更改子组件的样式

Question

我有 TrackCard 组件定义为：

<React.Fragment>
  {this.props.items.map((item, index) => (
    <div className={classes['genre-col']} key={index}> //<--------
      <div className={classes['track-single']}>
        <div className={classes['track-img-container']}>
          <img src={item.url} alt="" className={classes['track-image']} />
        </div>
        <div className={classes.genre}>
          <h6>{item.name}</h6>
          <p>{item.artist}</p>
        </div>
      </div>
    </div>
  ))}
</React.Fragment>

genre-col class定义在Music.scss

.genre-col {
    width: 20%;
}

现在我正在访问另一个名为 Feeds 的组件中的 TrackCard 组件，如下所示，样式在 Feeds.scss 中定义：

<div className={`${classes['feed-cover']}`}>
    <TrackCard  items={this.state.tracks}/>
</div>

但是这里我需要在不影响其他组件的情况下改变.genre-col的宽度。所以我需要使用 Feeds 组件中的父 class 访问 .genre-col 并在 Feeds.scss.

中定义它

我尝试在两个组件中导入样式文件并全局定义 class。但是一直没有结果。
我使用 SCSS 模块进行样式设置。

Answer 1

如果我错了请纠正我。据我了解，您想要的是从 Feeds 组件控制 TrackCard。有几种方法可以做到这一点。

1. 在 Feeds.css 中创建一个 class 并将其传递给如下所示的 TrackCard

<TrackCard  items={this.state.tracks} customClass={classes['track-card']}/>

和 Inside TrackCard

{this.props.items.map((item, index) => (
     <div className={classnames(classes['genre-col'], this.props.customClass)} key={index}> />

classnames 是一个库，可以轻松地进行 class 连接和其他操作。看看 library.

2.Define 不同的 classes 表示各种大小，你想要，在 Music.scss 本身。像下面的代码一样从 Feeds 传递一个道具。

.small { width: 300px; }
.medium { width: 500px; }
.large { width: 800px; }

对于 TrackCard pass 所需的大小作为道具。

<TrackCard  items={this.state.tracks} size={'medium'}/>

和 Inside TrackCard

{this.props.items.map((item, index) => (
     <div className={classnames(classes['genre-col'], classes[this.props.size])} key={index}> />

使用父组件样式文件中的父 class 更改子组件的样式

Change style of a child component using parent class from parent component's style file

html

sass

jsx

reactjs

css-modules