Как можно переопределить стили и добавить css-классы для готового react комонента?

Есть такой компонент в билиотеке @ap-cx/react-fullpage:

var FullpageNavigation = /*#__PURE__*/function (_PureComponent) {
  _inherits(FullpageNavigation, _PureComponent);

  var _super = _createSuper$2(FullpageNavigation);

  function FullpageNavigation() {
    _classCallCheck(this, FullpageNavigation);

    return _super.apply(this, arguments);
  }

  _createClass(FullpageNavigation, [{
    key: "render",
    value: function render() {
      var _this = this;

      var _this$props = this.props,
        style = _this$props.style,
        itemStyle = _this$props.itemStyle,
        _this$props$reverse = _this$props.reverse,
        reverse = _this$props$reverse === void 0 ? false : _this$props$reverse;
      var _this$context = this.context,
        number = _this$context.number,
        slides = _this$context.slides,
        transitionTiming = _this$context.transitionTiming;

      var gotoSlide = function gotoSlide(slide) {
        var _goto = _this.context["goto"];

        _goto(slide);
      };

      return /*#__PURE__*/React__default["default"].createElement("div", {
        style: _objectSpread({
          position: 'fixed',
          height: '100vh',
          zIndex: 100,
          top: 0,
          right: 0,
          listStyleType: 'none',
          display: 'flex',
          flexDirection: 'column',
          flexWrap: 'nowrap',
          justifyContent: 'center',
          paddingRight: '1em'
        }, style)
      }, slides.map(function (slide, i) {
        return /*#__PURE__*/React__default["default"].createElement("div", {
          key: i.toString()
        }, /*#__PURE__*/React__default["default"].createElement("div", {
          style: _objectSpread({
            borderRadius: '50%',
            height: number === i ? 14 : 10,
            width: number === i ? 14 : 10,
            margin: number === i ? 3 : 5,
            backgroundColor: reverse ? 'white' : 'black',
            opacity: number === i ? 1 : 0.5,
            transition: "all ".concat(transitionTiming * 0.5, "ms ease-in-out")
          }, itemStyle),
          onClick: function onClick() {
            return gotoSlide(slide);
          },
          onKeyPress: function onKeyPress() {
            return gotoSlide(slide);
          },
          role: "button",
          tabIndex: "-1",
          "aria-label": "Slide ".concat(i)
        }, /*#__PURE__*/React__default["default"].createElement("span", {
          style: {
            display: 'none'
          }
        }, "slide number ".concat(i))));
      }));
    }
  }]);

  return FullpageNavigation;
}(React.PureComponent);

_defineProperty(FullpageNavigation, "contextType", FullpageContext);

_defineProperty(FullpageNavigation, "defaultProps", {
  style: {},
  itemStyle: {},
  reverse: false
});

_defineProperty(FullpageNavigation, "propTypes", {
  style: PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].bool])),
  itemStyle: PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string, PropTypes__default["default"].bool])),
  reverse: PropTypes__default["default"].bool
});

Мне нужно для кнопок div [role='button']переопределить стили. Это можно сделать так:

div [role = 'button'] {
  background-color: #2da6ce !important;
  border: 1px solid #2da6ce !important;
  &:hover{
    opacity: 1 !important;
    background-color: #ecbb6f !important
  }
}

Но мне также нужно, чтобы активный элемент меню был такого же цвета как при :hover. Возможно есть способ добавить такому диву свой класс .active? Нужно наследоваться от этого компонента? Если меняю код в компоненте и сохраняю, стили остаются стандартные для компонента.