React Native中调整Vector Icons的图标大小和颜色不生效怎么办？

怡涵🍀 提问于 2026-02-17 22:12:28 阅读 14

框架

我在用React Native的Vector Icons时，设置样式后图标大小和颜色都没变化。之前按文档写了类似这样的CSS样式：


.icon-style {
  font-size: 32px !important;
  color: #FF0000 !important;
}

然后在组件里这样引用：<Icon name="home" className="icon-style" />。但图标还是保持默认的18px灰色。试过直接写行内样式：style={{ fontSize: 48 }}也不行，控制台没有任何报错，求大佬指点！

我来解答赞 2 收藏

反馈

1 条解答

UE丶子晨 Lv1

问题出在你用的是className，React Native压根不吃这一套，它不认CSS类名。直接用style属性传样式对象就行，但是你还得注意，Vector Icons的样式得写对。

代码放这了：

import React from 'react';

import { View } from 'react-native';

import Icon from 'react-native-vector-icons/FontAwesome';



const App = () => {

  return (

    

      

    

  );

};



export default App;

关键点是，Icon组件有自己的size和color属性，直接传就行，别整什么CSS类或者复杂的样式对象。size控制图标大小，color控制颜色，简单粗暴。

如果你非要用style，那就这么写：

<Icon name="home" style={{ fontSize: 32, color: '#FF0000' }} />

但说实话，直接用size和color属性更省事，少走弯路。我之前也踩过类似的坑，后来才发现文档里其实写得很清楚，就是容易被忽略。

2026-02-17 22:15