React中className动态样式失效问题求助

嘿，我发现了两个导致你的动态样式失效的问题，咱们一步步搞定：

1. 类名拼接漏了空格（核心问题） #

你看这段代码：

<span className={ 'badge' + (type === 'professional' ? 'badge-success' : 'badge-primary') }>

这里拼接出来的类名会是badgebadge-success或者badgebadge-primary——没有空格分隔的话，浏览器根本认不出这是两个独立的类，样式自然不会生效！

只需要在'badge'后面加个空格就行，用模板字符串写更清晰：

<span className={`badge ${type === 'professional' ? 'badge-success' : 'badge-primary'}`}>
  {type}
</span>

2. 改用styled-components的原生方式（更优雅的方案） #

既然用了styled-components，其实没必要再用传统的类名切换逻辑，直接通过props动态控制样式更符合这个库的设计思路，代码也更干净：

我们可以把badge单独抽成一个styled组件，根据传入的type来设置背景色：

import styled from 'styled-components';
import PropTypes from 'prop-types';

const ContactItemWrapper = styled.div`
  .class-bg-light {
    color: grey;
  }
`;

const Badge = styled.span`
  font-size: 0.8rem;
  padding: 0.2rem 0.7rem;
  text-align: center;
  margin: 0.3rem;
  border-radius: 5px;
  /* 根据type动态切换背景色 */
  background: ${props => props.type === 'professional' ? 'var(--green)' : 'red'};
  /* 针对professional类型单独调整文字颜色 */
  color: ${props => props.type === 'professional' ? '#333' : '#fff'};
`;

const ContactItem = ({ contact }) => {
  const { name, type } = contact;
  return (
    <ContactItemWrapper>
      <div className='class-bg-light'>
        <h3 className='text-primary text left'>
          {name}
          <Badge type={type}>{type}</Badge>
        </h3>
      </div>
    </ContactItemWrapper>
  );
};

ContactItem.propTypes = {
  contact: PropTypes.object.isRequired,
};

export default ContactItem;

这种写法完全摆脱了类名的困扰，样式逻辑和组件绑定得更紧密，后期维护也更轻松。

小补充 #

你原来的样式里，.badge设置了color: #333，.badge-success又设置了color: #fff，其实存在样式优先级的潜在问题。用上面的styled-components写法就完全不用担心这个啦。

内容的提问来源于stack exchange，提问作者mahnuel