Изменить стиль дочернего компонента с помощью родительского класса из файла стиля родительского компонента - PullRequest
Новая
       18

Изменить стиль дочернего компонента с помощью родительского класса из файла стиля родительского компонента

0 голосов
/ 09 июля 2019

У меня 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 Component и определить его в Feeds.scss.

Я попытался импортировать файлы стилей в оба компонента и определить класс глобально. Но результата не было.
Я использую модули SCSS для стиля.

1 Ответ

1 голос
/ 09 июля 2019

Поправь меня, если я ошибаюсь.Как я понял, вы хотите контролировать TrackCard из Feeds Component.Есть несколько способов сделать это.

1. Создайте класс в Feeds.css и передайте его в 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 - это библиотека дляобъединение классов и прочее.Взгляните на библиотеку .

2. Определите различные классы, представляющие различные размеры, как вы хотите, внутри самого Music.scss.Передайте реквизит из Feeds, как показано ниже: 

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

Для прохождения TrackCard необходим размер в качестве реквизита. 

<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}> />
...