This repository was archived by the owner on Jun 30, 2024. It is now read-only.
This repository was archived by the owner on Jun 30, 2024. It is now read-only.
Wrapping styled components causes styling issues #405
Open
Description
Describe the bug (including copyable syntax)
Wrapping styled components is causing style issues. If I remove the theme wrapper the stling returns to the expected
Expected styles (see the CustomerNameWidth
const is blue)
Screenshot
Unexpected styles (see the CustomerNameWidth
const is yellow)
To Reproduce
const theme = (Component) => {
const ThemedComponent = (props) => <Component {...props} theme="dark" />;
return ThemedComponent;
};
const getTableHeaderColor = ({theme}: any): string => theme === "dark" ? "gray" : "white";
const TableHeader = theme(styled.div`
width: 100%;
background-color: ${getTableHeaderColor};
display: flex;
padding: 10px 50px;
margin-bottom: 10px;
`);
const CustomerNameWidth = styled.div`
flex-basis: 90%;
`;
Build environment (please complete the following information):
- OS: MacOS Monterey 12.6.3
- VSCode Version: 1.76.2
- Extension Version 1.7.5
Extensions
styled-components.vscode-styled-components
Additional context
Add any other context about the problem here.