custom style not propagated about react-tabtab

[ddelpiano]

one more note, I am using the version 1.8.4 of the library and consequent 3.4.1 of the style library since this project still use React 15.

[kapilpipaliya]

I have exactly same problem.
I think problem is in this line:

${props => props.active && !props.vertical ?
    ` border-bottom: 2px solid #f6b2b5;` : null}
        &:hover {
            background-color: transparent;
        }`

[ddelpiano]

@kapilpipaliya I don't this so, I dug in the Tabs and Tab components a bit and I can see there is a style kind of hardcoded in the component itself used if the CustomTabStyle is undefined, that is using white for the background-color.
As you can see I changed the background color in all the custom styles to have a light blue or whatever (did not really care, anything different than white) but still I can see the white when this render.

[ddelpiano]

Found the problem.
I was using export default and this was causing an issue underneath since the TabList component was looking for the customStyle.Tab component where the style was defined, but this was under customStyle.default.Tab, so the previous resulted with an undefined component and was taking the hardcoded style.

Code changed

var styled = require('react-tabtab').styled;
let {TabListStyle, ActionButtonStyle, TabStyle, PanelStyle} = styled;

TabListStyle = TabListStyle.extend`background-color: #009988;`;

TabStyle = TabStyle.extend`background-color: #009988;transition: color .28s ease;`;

ActionButtonStyle = ActionButtonStyle.extend`
background-color: #009988; border-radius: 0; &:hover { background-color: #eee; }`;

PanelStyle = PanelStyle.extend`
background-color: #009988;
border-left: 1px solid rgba(0,0,0,0.12);
border-right: 1px solid rgba(0,0,0,0.12);
border-bottom: 1px solid rgba(0,0,0,0.12);
padding: 30px 30px;
transition: box-shadow .25s, -webkit-box-shadow .25s;
border-radius: 2px;
`;

// need to follow this object naming
module.exports = {
    TabList: TabListStyle,
    ActionButton: ActionButtonStyle,
    Tab: TabStyle,
    Panel: PanelStyle
};

@kapilpipaliya I hope this will help you, cheers.