Search code examples
javascriptreactjsimportstyled-componentsbackground-color

how to import values to styled components from another file

Im trying to pass a value imported from another file to my styled component , but i get notification from my editor that the syntax is wrong , whats the correct way of writing this or how i can pass the value for the background color to this component?

import { Colors } from "../theme/Theme";

const FootergEl = styled.div`
  position: relative;
  height: 482px;
  width: 100vw;
  margin-top: 196px;
  background-color: `${Colors.Brand.BGFooter}`;
`;
Solution

  • the correct way do this is as below

    import { Colors } from "../theme/Theme";

const FootergEl = styled.div`
position: relative;
height: 482px;
width: 100vw;
margin-top: 196px;
background-color: ${()=>Colors.Brand.BGFooter};`;
;