React中如何为同一组件的不同实例渲染差异化CSS样式？

我来帮你搞定这个问题，你遇到的核心问题是没有正确把外部传入的标识（类名/ props）传递到组件内部的元素上，而且结合你用的styled-components，咱们可以用两种方法来解决：

方法一：正确传递并使用className（适合已有CSS文件的场景） #

你之前在App里给第二个NavBar加了className='drugi'，但组件里没接收也没应用这个类名，所以样式没法生效。咱们改一下NavBar组件：

import styled from 'styled-components';

// 函数组件要接收props对象，里面包含外部传入的className
const NavBar = (props) => {
  return (
    // 把外部的className加到外层div上，这样CSS就能选中这个实例里的元素
    <div className={props.className}>
      <Container>
        <a className='neon'>Neon</a>
      </Container>
    </div>
  );
};

const Container = styled.div`
  background-color: transparent;
`;

export default NavBar;

然后在你的CSS文件（比如App.css）里，用更具体的选择器来写自定义样式（避免被原有样式覆盖）：

/* 选中第二个NavBar里的neon链接 */
.drugi .neon {
  color: #ff00ff; /* 改成你想要的颜色 */
  text-shadow: 0 0 15px #ff00ff; /* 自定义发光效果 */
  font-size: 24px;
}

这样App里的第二个<NavBar className='drugi'></NavBar>就会应用这个样式了。

方法二：用styled-components的动态Props（更符合组件库设计） #

既然你用了styled-components，咱们可以直接用它的动态样式功能，不用额外写CSS文件，更简洁：

先修改NavBar组件，让styled组件能接收props并动态调整样式：

import styled from 'styled-components';

// 给Container加动态样式支持
const Container = styled.div`
  background-color: transparent;
  /* 如果传入isCustom为true，就应用这些样式 */
  ${props => props.isCustom && `
    margin: 0 10px;
  `}
`;

// 给neon链接加动态样式
const NeonLink = styled.a`
  /* 默认样式 */
  color: #00ffff;
  text-shadow: 0 0 10px #00ffff;
  /* 自定义样式：只有isCustom为true时生效 */
  ${props => props.isCustom && `
    color: #ff00ff;
    text-shadow: 0 0 15px #ff00ff, 0 0 25px #ff00ff;
  `}
`;

const NavBar = (props) => {
  return (
    <Container isCustom={props.isCustom}>
      <NeonLink className='neon' isCustom={props.isCustom}>Neon</NeonLink>
    </Container>
  );
};

export default NavBar;

然后在App里调用时，给第二个实例传isCustom={true}：

<div className='divBut'>
  <NavBar></NavBar>,
  <NavBar isCustom={true}></NavBar>,
  <NavBar></NavBar>
</div>

这样第二个NavBar实例就会自动应用你定义的自定义样式啦。

你之前踩的坑 #

1. 函数组件的参数写错了：应该是(props)而不是(type)，组件接收的是一个props对象，type只是其中的一个属性，得用props.type访问。
2. 没有把外部传入的className/ props绑定到内部元素上：导致CSS无法定位到目标元素，自然样式不生效。
3. 样式优先级问题：如果原有.neon的样式优先级高，需要用更具体的选择器（比如.drugi .neon）来覆盖它。

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