ReactJS material-ui向HTML标签元素添加样式

问题描述

我有一个reactjs文件，可从material-ui加载一个图标

import LocalHospital from "@material-ui/icons/LocalHospital";

然后在页面的另一部分，我正在另一个HTML标签内使用该图标

    <div className={classes.features}>
      <GridContainer>
        <GridItem md={4} sm={4}>
          <InfoArea
            title="Addressing Crucial diseases"
            description="Thermo analyser products aiming to solve severe problems whihc have real and crucial implications on human lives."
            icon={Accessible}
            iconColor="danger"
            vertical={true}
          />
        </GridItem>
        <GridItem md={4} sm={4}>
          <InfoArea
            title="Novel and Reliable Approaches"
            description="Thermo analyser employs novel and sophisticated apporches to effectively diagnose major diseases in reliable and acurate way."
            icon={<LocalHospital style={{ fill: "green" }} />}
            iconColor="transparent"
            vertical={true}
          />
        </GridItem>
        <GridItem md={4} sm={4}>
          <InfoArea
            title="Effective and Accurate Results"
            description="Our products are scientifically proven softwares which have been developed by proficient experts in the field. They have achived an accuracy of at least %98 in our test use-cases."
            icon={Healing}
            iconColor="success"
            vertical={true}
          />
        </GridItem>
      </GridContainer>

问题是我需要在JS文件中更改LocalHospital Icon的样式，例如将下面的样式分类为Icon

style={{"fill": "green"}}

但是我不确定如何在reactjs文件中以编程方式进行操作吗？

根据评论，我编辑了标签，但仍然无法正常工作。

  <InfoArea
    title="Novel and Reliable Approaches"
    description="Thermo analyser employs novel and sophisitcated apporches to effectively diagnose major diseases in reliable and acurate way."
    icon={() => <LocalHospital style={{ fill: "green" }}
    iconColor="transparent"
    vertical={true}
  />

它给了我下面的错误

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `InfoArea`.
▶ 20 stack frames were collapsed.
Module../src/index.js
C:/ThermoAnalyser/material-kit-pro-react-v1.9.0/src/index.js:46
  43 | 
  44 | var hist = createbrowserHistory();
  45 | 
> 46 | ReactDOM.render(
  47 |   <Router history={hist}>
  48 |     <Switch>
  49 |       <Route path="/about-us" component={AboutUsPage} />

解决方法

要更改图标的样式，您无需在其中使用箭头功能，就可以这样做

  <InfoArea
    title="Novel and Reliable Approaches"
    description="Thermo analyser employs novel and sophisitcated apporches to effectively diagnose major diseases in reliable and acurate way."
    icon={<LocalHospital style={{ fill: "green" }} />}
    iconColor="transparent"
    vertical={true}
  />

material-ui reactjs reactjs