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

Question

I'm mapping an object in the state called 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'

  }
]

And rendering those items:

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>
  )
}

The good thing is everything renders properly and I get no errors in my console. I was trying to use ternary's to change class name for my elements based on what is in state and the logic works because the class does change in chrome dev tools! However when I inspect it the styling that I imported from my css file specifically is not applied/does not work and only shows element.style {} for that specific element. I checked to see if my import for my stylesheet was the issue but other elements are styled correctly. I have also tried using !important for the css and checked if there were any other css files that style .shop and .shop-now accidentally in which there weren't.

.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

You should remove the . in your className reference eg 'shop-now' instead of '.shop-now':

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

CSS class names should be defined with a . in your stylesheets, but referenced on HTML elements without the .