如何在JSX中修改Primereact图标大小？现有方案失效求解决

我之前在使用PrimeReact的时候也碰到过一模一样的问题，官方直接修改图标样式的方案确实没法在JSX里生效——毕竟React要求内联样式必须是对象格式，没法直接给嵌套的图标元素写原生样式字符串。下面给你几个亲测可行的解决办法：

1. 使用CSS类（最推荐，维护性最强） #

既然你的按钮已经加了className="cogIcon"，直接在CSS文件里针对这个类下的图标写样式就行，PrimeReact的图标是嵌套在按钮里的<i>标签，带.pi类名，所以样式可以这么写：

.cogIcon .pi {
  font-size: 1.5rem; /* 替换成你需要的大小 */
  color: #333; /* 还能顺便修改图标颜色，按需添加 */
}

这种方式完全符合React的样式规范，而且后续要修改样式直接改CSS就行，非常方便。

2. 利用PrimeReact Button组件的iconStyle属性（最直接） #

其实PrimeReact的Button组件专门提供了iconStyle这个props，用来单独设置图标的内联样式，不用手动操作嵌套元素。直接修改你的Button代码：

<Button 
  label="" 
  icon="pi pi-cog" 
  className="cogIcon" 
  onClick={(e) => this.setState({visibleRight:true})} 
  style={{marginTop: '.25em', marginRight: '.25em'}}
  iconStyle={{ fontSize: '1.5rem' }} // 这里直接设置图标大小
/>

这个方法完全贴合组件的API设计，是最“正统”的解决方式。

3. 动态修改用Ref（仅特殊场景使用） #

如果你的图标大小需要根据状态动态变化，那可以用React的Ref来获取图标元素，手动修改样式：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.iconRef = React.createRef();
    this.state = { visibleRight: false };
  }

  componentDidMount() {
    // 组件挂载后修改图标大小
    if (this.iconRef.current) {
      this.iconRef.current.style.fontSize = '1.5rem';
    }
  }

  render() {
    return (
      <Button 
        label="" 
        icon="pi pi-cog" 
        className="cogIcon" 
        onClick={(e) => this.setState({visibleRight: true})} 
        style={{marginTop: '.25em', marginRight: '.25em'}}
        iconRef={this.iconRef} // 给图标绑定ref
      />
    );
  }
}

不过这种方法不太推荐，因为它属于命令式操作DOM，违背了React声明式编程的原则，只有当你需要实时动态调整样式时再考虑使用。

简单总结下：官方方案不生效是因为它针对原生DOM元素写样式，而React组件的嵌套元素没法直接这么操作，用CSS类或者组件自带的iconStyle是最稳妥的选择。

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