如何覆盖 react-chartist 组件中的样式？

Posted 2023-02-25

【中文标题】如何覆盖 react-chartist 组件中的样式？

【英文标题】：How to override styles in a react-chartist component?

【发布时间】：2018-05-08 14:13:00

【问题描述】：

我有一个简单的 React JS 组件，它包裹着非常酷的 react ChartistGraph 组件。唯一的问题是样式似乎被 ChartistGraph 默认 CSS 覆盖。常规的Chartist js package 上有很多信息，但React JS package 上的信息不多。

如您所见，我尝试通过两种方式更改填充颜色：通过样式类和通过组件支持的道具。

import React from 'react';
import  Paper, withStyles  from 'material-ui';
import ChartistGraph from 'react-chartist';

const styles = theme => (
  graphStyle: 
    fill: 'red',
  ,
);

const CustomChart = ( classes, graph ) => 
  return (
    <Paper>
      <ChartistGraph
        className=classes.graphStyle
        data=graph.data
        options=graph.options
        type=graph.type
        style= fill: 'red' 
      />
    </Paper>
  );
;

export default withStyles(styles)(CustomChart);

A picture of the styles of the chart

【参考方案1】：

可以使用jss的嵌套规则（默认包含在material-ui中）：

const styles = theme => (
  graphStyle: 
    '& .ct-label':  fill: 'red' ,
  ,
);

完整代码：

import React from 'react';
import  Paper, withStyles  from 'material-ui';
import ChartistGraph from 'react-chartist';

const styles = theme => (
  graphStyle: 
    '& .ct-label':  fill: 'red' ,
  ,
);

const CustomChart = ( classes, graph ) => 
  return (
    <Paper>
      <ChartistGraph
        className=classes.graphStyle
        data=graph.data
        options=graph.options
        type=graph.type
        // style= fill: 'red'  // omitted
      />
    </Paper>
  );
;

export default withStyles(styles)(CustomChart);

【参考方案2】：

我最近遇到了类似的问题。React-Chartist 是建立在 react 而不是 material-ui 之上的。当你检查时，你会发现常规的 css 类名，而不是“material ui-ish”类名（比如 MuiTable-root ,MuiTable-selectedRow 等）。所以，恕我直言，它不支持 material-ui 方法（withStyle/makeStyle）和规则。

但你能做的是：-

创建一个 css 文件并将您的样式放在那里 然后将其导入到您想要的位置

。您可以将其导入应用程序的主文件（index.js 或其他文件），因为应用程序中的每个 css 都将捆绑在一个文件中。