React CSSが効かない。

Question

React, JavaScript 等初心者です。

CSSを設定したいのですが、
効いておりません。

確認すべき箇所、または間違いをご指摘いただけますと幸いです。

indexpage.css ↓

ul.column {
  background-color: black;
  margin: 0;
  text-align: left;
  list-style: none;
  width:48%;
  display: inline-block;
}

const React = require('react')
class Index extends React.Component {
  render(){
    const products = this.props.products;
    return (
      <div styles={[{key: 0, href: '/css/app.css'}, { key: 1, href: '/css/indexpage.css'}]}>
        <h1>See All The Products!</h1>
        <ul>
          {
            products.map((product)=>{
              return(
                <li key={product._id} id="column">
                                  <a href={`/products/${product._id}`}><font color="silver">{product.name}{product.description}</font></a>
                                  <form method="POST" action={`/products/${product._id}?_method=DELETE`}>
                                  <img src={product.img} width="295px" height="393px" ></img>
                                  <input type="submit" value="DELETE"/>
                  </form>
                  <a href={`/products/${product._id}/edit`}><font color="silver">Edit This Product</font></a>
                                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

module.exports = Index;

Comments

[K_3578]

効いてないって事はパス指定間違ってるんじゃないですか？階層確認してみては。

Answer 1

app.use(express.static('public'));

上記が抜けておりました。
ご指摘ありがとうございました。