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类在Music.scss

中定义

.genre-col {
    width: 20%;
}

现在，我正在如下访问另一个名为TrackCard的组件中的Feeds组件，并且样式在Feeds.scss中进行了定义：

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

但是在这里，我需要在不影响其他组件的情况下更改.genre-col的宽度。因此，我需要使用.genre-col组件中的父类访问Feeds并在Feeds.scss中对其进行定义。

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

Answer 1

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

1.在Feeds.css中创建一个类，然后将其传递给TrackCard，如下所示：

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

和内部TrackCard

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

classnames是一个用于轻松进行类连接和填充的库。看看library。

2。在Music.scss本身内定义代表各种大小的不同类。像下面的代码一样，从Feed中传递道具。

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

对于TrackCard，传递所需尺寸作为道具。

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

和内部TrackCard

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

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

1 个答案: