ホームフィードと詳細画面のあるReactJSのアプリを作っています。ホームフィードの一つ一つの箱に５種類の色をつけるため、:nth-child(an+b)を使って以下のCSSを追加しました。

css
1.home-feed li :nth-child(5n+1) {
2  background-color: #949CF6;
3}
4
5.home-feed li :nth-child(5n+2) {
6  background-color: #F499A7;
7}
8
9.home-feed li :nth-child(5n+3) {
10  background-color: #FFD89C;
11}
12
13.home-feed li :nth-child(5n+4) {
14  background-color: #8FEADB;
15}
16
17.home-feed li :nth-child(5n+5) {
18  background-color: #5485FD;
19}

それぞれの詳細画面においても同じ色を適応したいのですが、これを動的に設定するにはどうすればいいでしょうか？

要は以下のようなCSSを実現させたいのですが、数が１００以上はあり今後増えていくため、このように指定するわけにもいきません。

css
1.detail .detail1 {
2  background-color: #949CF6;
3}
4
5.detail .detail2 {
6  background-color: #F499A7;
7}
8
9.detail .detail3 {
10  background-color: #FFD89C;
11}
12
13.detail .detail4 {
14  background-color: #8FEADB;
15}
16
17.detail .detail5 {
18  background-color: #5485FD;
19}
20
21.detail .detail6 {
22  background-color: #949CF6;
23}

ベストな方法があれば教えていただきたいです。m(_ _)m

行動規範の内容に同意します

回答4件

フィードリストの個々のリストをクリックすると、そのリストに紐づく詳細画面(Detailコンポーネント)が表示されるというものを想定して回答します。

その場合であれば、単純にクリックされたリストの背景色、または背景色が定義されたクラス名をDetailコンポーネントのpropsで渡してあげて、Detailコンポーネントは渡された背景色、または、クラス名を使って自身をレンダーしてあげれば良いだけだと思います。

react-routerを使っているのであれば、Linkコンポーネントにはオブジェクトを渡せるので、その中のstateプロパティーで色なりクラス名を渡してあげて、遷移先の詳細画面コンポーネントに渡ってくる値を取り出してあげると良いと思います。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md#to-object

<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>

即席デモコード

デモ

index.js

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import './styles.css';

const Detail = ({ location }) => {
  
  return (
    <div className={location.state.className}>Detail</div>
  )
}

class UserList extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      users: [
        { id: 1, name: 'a' }, //1
        { id: 2, name: 'b' }, //2
        { id: 3, name: 'c' }, //3
        { id: 4, name: 'd' }, //1
        { id: 5, name: 'e' }, //2
        { id: 6, name: 'f' }  //3
      ]
    }
  }

  render() {
    return (
      <ul>
        {
          this.state.users.map((user, index) => {
            return (
              <li key={user.id}>
                <Link to={{
                  pathname: `detail/${user.id}`,
                  state: { className: `detail${index % 3 + 1}` }
                }}>{user.name}</Link>
              </li>
            )
          })
        }
      </ul>
    )
  }

}

render(
  <BrowserRouter>
    <Switch>
      <Route path='/' exact component={UserList} />
      <Route path='/detail/:id' component={Detail} />
    </Switch>
  </BrowserRouter>, 
  document.getElementById('root')
);

styles.css

ul li:nth-child(3n+1) {
  background-color: #949CF6;
}

ul li:nth-child(3n+2) {
  background-color: #F499A7;
}

ul li:nth-child(3n+3) {
  background-color: #FFD89C;
}

.detail1 {
  background-color: #949CF6;
}

.detail2 {
    background-color: #F499A7;
}

.detail3 {
    background-color: #FFD89C;
}

投稿2018/04/02 03:33

編集2018/04/02 04:19

HayatoKamono

総合スコア2415

.detail1と.detail6の背景色が同じということでしょうか？
.bgc1~.bcg5のような別のクラスで制御してはまずいのでしょうか？

投稿2018/04/02 03:20

yambejp

総合スコア114784

ベストアンサー

SCSSの利用が大前提となりますが、以下のような記述することで、あとは配列$colorsに新しい色を追加するだけでCSSを生成することが可能です。

SCSS
1$colors: "#949CF6", "#F499A7", "#FFD89C", "#8FEADB", "#5485FD";
2
3@each $color in $colors {
4  $index: index($colors, $color);
5
6  .home-feed li :nth-child(5n + #{$index}) {
7    background-color: $color;
8  }
9
10  .detail .detail#{$index} {
11    background-color: $color;
12  }
13}

投稿2018/04/02 03:28

退会済みユーザー

総合スコア0

rina_teratail

2018/04/05 09:13 編集

ありがとうございます！CSSでかける場合はJSでなくCSS（SASS）で書いたほうがいいと思うので、選ばせていただきました！ > <

行動規範の内容に同意します

一つの方法としてCSSOMを使う方法があります.

JavaScript
1"use strict";
2{
3	const colors = ["#000000", "#111111", "#222222", "#333333", "#444444"];
4	const style = document.createElement("style");
5	document.head.appendChild(style);
6	const sheet = style.sheet;
7	for(let i = 0; i<100; i++){
8		sheet.insertRule(`.detail .detail${i+1}{background-color:${colors[i%5]};}` , 0);
9	}
10}