Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrapping styled components causes styling issues #405

Open
garthtee opened this issue Mar 21, 2023 · 0 comments
Open

Wrapping styled components causes styling issues #405

garthtee opened this issue Mar 21, 2023 · 0 comments
Labels

Comments

@garthtee
Copy link

garthtee commented Mar 21, 2023

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)
image

Screenshot
Unexpected styles (see the CustomerNameWidth const is yellow)
image

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.

@garthtee garthtee added the bug label Mar 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant