Как переопределить стили в компоненте response-chartist? - PullRequest
Новая
       18

Как переопределить стили в компоненте response-chartist?

0 голосов
/ 08 мая 2018

У меня есть простой компонент React JS, который оборачивается вокруг действительно классного компонента ChartistGraph реагирования. Единственная проблема заключается в том, что стили, по-видимому, переопределяются стандартным CSS ChartistGraph. Существует много информации о обычном пакете Chartist js , но не так много о пакете React JS .

Как видите, я пытаюсь изменить цвет заливки двумя способами: через классы стилей и через опору, которая поддерживается в компоненте. 

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

Изображение стилей диаграммы

1 Ответ

0 голосов
/ 05 ноября 2018

Вы можете использовать вложенные правила 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);
...