为什么我的类样式不被识别？反应

Question

我正在映射一个名为 items2

items2: [
  {
    id: 1,
    title: 'TRENDING ON THE COURT',
    image1: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/8ef2ada7-0cf4-43d4-a0a1-4a60e3071b06/jordan.jpg',
    image2: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/1b387797-073a-4f60-8b67-9485c23ca556/jordan.jpg',
    image1title: 'AIR JORDAN XXXIV SE',
    image2header: 'L.A BORN',
    image2title: 'JORDAN "WHY NOT?" ZERO.3',
    a1text: 'Shop',
    a2text: 'Shop'

  },
  {
    id: 2,
    title: 'TRENDING ON THE STREETS',
    image1: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/ac454c04-2d8b-4cf5-b73a-7245545b6f7c/jordan.jpg',
    image2: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/de7332be-8c0d-405f-af9e-201ba9f61ab3/jordan.jpg',
    image1title: 'JORDAN AIR MAX 200',
    image2title: "JORDAN WOMEN'S FLIGHT CAPSULE",
    a1text: 'Shop',
    a2text: 'Shop'
  },
  {
    id: 3,
    title: 'MEMBER ACCESS',
    image1: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/2225370e-a461-4ea3-ac94-3ece70dc3575/jordan.jpg',
    image2: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/037f5213-a631-4e91-9c70-9187aefda947/jordan.jpg',
    image1header: "'JORDAN UNITE COLLECTION'",
    image1title: 'AIR JORDAN III',
    image2title: "GET JORDAN'S LATEST",
    a1text: 'Shop Now',
    a2text: 'Download SNKRS'
  },
  {
    id: 4,
    title: 'EXPLORE MORE FROM JORDAN',
    image1: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/063f62a9-28b5-4f40-9e06-a894f5c469dd/jordan.jpg',
    image2: 'https://c.static-nike.com/a/images/f_auto/dpr_2.0/h_500,c_limit/6d0400bf-5378-4ec5-85f1-40145fce3d30/jordan.jpg',
    image1title: 'STORIES UNITING THE COMMUNITY',
    image2title: 'THE ULTIMATE HISTORY OF AIR JORDAN',
    a1text: 'Explore',
    a2text: 'Explore'

  }
]

并渲染这些项目：

renderItems2 = () => {
  return (
    <div className='items2-container'>
      {this.state.items2.map(item => {
        return (
          <div className='item2-card' key={item.id}>
            <h2>{item.title}</h2>
            <img src={item.image1} />
            <div>
              <h6>{item.image1header}</h6>
              <h2>{item.image1title}</h2>
              <a className={item.a1text !== 'Shop' ? '.shop-now' : '.shop'}>{item.a1text}</a>

            </div>
            <img src={item.image2} />
            <div>
              <h6>{item.image2header}</h6>
              <h2>{item.image2title}</h2>
              <a className={item.a2text !== 'Shop' ? '.shop-now' : '.shop'}>{item.a2text}</a>
            </div>

          </div>
        )
      })}
    </div>
  )
}

好消息是一切都正确呈现，我的控制台没有错误。我试图根据状态和逻辑工作使用三元来更改元素的类名，因为该类在 chrome 开发工具中确实发生了变化！但是，当我检查它时，我从我的 css 文件中专门导入的样式没有应用/不起作用，并且只显示该特定元素的 element.style {}。我检查了我的样式表导入是否有问题，但其他元素的样式是否正确。我也尝试过使用 !important 作为 css 并检查是否有任何其他 .shop 和 .shop-now 样式的 css 文件意外地在其中没有。

.shop {
    padding-top: 11px;
    padding-bottom: 9px;
    padding-left: 24px;
    width: 40%;
    padding-right: 24px;
    border-radius: 20px;
    background-color: #fff;
    color: #111;
}

.shop-now {
    padding: 20px;
    border-radius: 20px;
    background: #fff;
    color: #111;
}

Answer 1

您应该删除.className 引用中的 ，例如“shop-now”而不是“.shop-now”：

<a className={item.a2text !== 'Shop' ? 'shop-now' : 'shop'}>{item.a2text}</a>

CSS 类名应.在样式表中用 a 定义，但在 HTML 元素上引用时不带.