Question

我有一个简单的React JS组件，它包含了非常酷的反应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

Answer 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);

Answer 2

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

但是您可以做的是：-

创建一个css文件，然后在其中放置样式
然后将其导入到所需位置

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

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

2 个答案: