Compiled className get's overwritten by className from the props

Having two components, `NavIconLink` and `AnchorDefault` I pass `styleName` to the `AnchorDefault`, but also there might be a `className` from the props spread that will be passed as well.
In this case of `className` is passed - whatever was transformed from `styleName` to `className` get's overwritten by passed `className` from the spread.

```JSX

import React from 'react';
import PropTypes from 'prop-types';

import {
AnchorDefault,
Icon,
} from '../../elements';

import styles from './NavIconLink.scss';

export const NavIconLink = ({
label,
icon,
...props
}) => (


{label}





);

NavIconLink.propTypes = {
label: PropTypes.string,
icon: PropTypes.string,
};

```
Compiled part
```JavaScript
var NavIconLink = function NavIconLink(_ref) {
var label = _ref.label,
icon = _ref.icon,
props = _objectWithoutProperties(_ref, ["label", "icon"]);

return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements__WEBPACK_IMPORTED_MODULE_2__[/* AnchorDefault */ "b"], _extends({
className: "a-navicon-link___36tEr" + (" " + (props ? props.className || "" : "")),
activeClassName: _NavIconLink_scss__WEBPACK_IMPORTED_MODULE_3___default.a['a-navicon-link--active']
}, props), _jsx("span", {
className: "u-visible-sml"
}, void 0, label), _jsx("span", {
className: "u-block-md"
}, void 0, _jsx(_elements__WEBPACK_IMPORTED_MODULE_2__[/* Icon */ "s"], {
className: "a-svg-medium",
icon: icon
})));
};
```

```JSX
import React from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';

export const AnchorDefault = ({
label,
onClick,
children,
disabled,
className,
openNewTab,
...other
}) => {
const LinkComponent = other.to
? NavLink
: other.href ? 'a' : 'button';

return (

{children || label}

);
};

AnchorDefault.propTypes = {
children: PropTypes.any,
label: PropTypes.string,
disabled: PropTypes.bool,
className: PropTypes.string,
href: PropTypes.string,
onClick: PropTypes.func,
openNewTab: PropTypes.bool,
};

export default AnchorDefault;
```

The current workaround is to manually write `className` prop and set it.

```JSX
export const NavIconLink = ({
label,
icon,
className,
...props
}) => (


{label}





);
```
```JavaScript
var NavIconLink = function NavIconLink(_ref) {
var label = _ref.label,
icon = _ref.icon,
className = _ref.className,
props = _objectWithoutProperties(_ref, ["label", "icon", "className"]);

return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elements__WEBPACK_IMPORTED_MODULE_2__[/* AnchorDefault */ "b"], _extends({
className: (className ? className + " " : "") + "a-navicon-link___36tEr" + (" " + (props ? props.className || "" : "")),
activeClassName: _NavIconLink_scss__WEBPACK_IMPORTED_MODULE_3___default.a['a-navicon-link--active']
}, props), _jsx("span", {
className: "u-visible-sml"
}, void 0, label), _jsx("span", {
className: "u-block-md"
}, void 0, _jsx(_elements__WEBPACK_IMPORTED_MODULE_2__[/* Icon */ "s"], {
className: "a-svg-medium",
icon: icon
})));
};
```