Skip to content

Cannot use custom style as way of the documentation #145

@KENNYSOFT

Description

@KENNYSOFT

https://github.com/ctxhou/react-tabtab#make-your-own-style

The document says:

Second: extend style and export it

import {styled} from 'react-tabtab';
let {TabListStyle, ActionButtonStyle, TabStyle, PanelStyle} = styled;

TabListStyle = styled(TabListStyle)`
 // write css
`;

TabStyle = styled(TabStyle)`
 // write css
`;

ActionButtonStyle = styled(ActionButtonStyle)`
 // write css
`;

PanelStyle = styled(PanelStyle)`
 // write css
`;

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

But styled is an object, so you cannot use this way. I used following way:

import styled from 'styled-components'
import {styled as tabtabStyle} from 'react-tabtab'
let {TabListStyle, ActionButtonStyle, TabStyle, PanelStyle} = tabtabStyle;

TabListStyle = styled(TabListStyle)`
  // write css
`;

TabStyle = styled(TabStyle)`
  // write css
`;

ActionButtonStyle = styled(ActionButtonStyle)`
  // write css
`;

PanelStyle = styled(PanelStyle)`
  // write css
`;

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

Please update the document. 😄

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions