ui-components
ui-components copied to clipboard
Auto-generated docs care about the name of the exported component
The react-docs module that automatically generates documentation from comments and prop types cares about the name of the default export. This causes issues with styled-components.
This will not build (but it should):
class Alert extends React.PureComponent {
render() {
return (
<div>{this.props.children}</div>
);
}
}
const StyledAlert = styled(Alert)`
width: 100%;
background-color: red;
visibility: ${props => (props.visible ? 'visible' : 'hidden')};
`;
export default StyledAlert;
But this will:
const StyledAlert = styled.div`
background-color: red;
`;
/**
* An alert...
*/
class Alert extends React.PureComponent {
render() {
return (
<StyledAlert {...this.props}>{this.props.children}</StyledAlert>
);
}
}
export default Alert;
Exporting the exact class is the current work around (ie if the file is Alert.js, export a class called Alert)