react-tabtab icon indicating copy to clipboard operation
react-tabtab copied to clipboard

Cannot use custom style as way of the documentation

Open KENNYSOFT opened this issue 6 years ago • 0 comments

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. 😄

KENNYSOFT avatar Feb 12 '20 10:02 KENNYSOFT