CODEWITHSUNDEEP
reactjsstyled-components
lomine
lomine

Reputation: 1171

Styled Component function getting values from theme

I have a demo here

I have a simple react app using styled components

I have a simple styled Block that uses a function to generate the content

const widthFun = (a: number, b: number) => {
  return a + b;
};

const Block = styled.div`
  background: red;
  height: ${({ theme }) => theme.sizes.height}px;
  width: ${widthFun(50, 50)}px;
`;

I also so have a theme like

import { DefaultTheme } from "styled-components";

export const theme: DefaultTheme = {
  sizes: {
    height: "200",
    width: "100"
  }
};

I'm trying to use the theme values in the function like

const Block = styled.div`
  background: red;
  height: ${({ theme }) => theme.sizes.height}px;
  width: ${widthFun(50, 50)}px;
  width: ${widthFun(${({theme}) => theme.sizes.height}, ${({theme}) => theme.sizes.height})}px;
`;

I'm getting errors trying this.

Is it possible to use them values in a function in the styled-component

Upvotes: 0

Views: 331

Answers (1)

Sylvester
Sylvester

Reputation: 131

how about this?

const Block = styled.div`
  background: red;
  height: ${({ theme }) => theme.sizes.height}px;
  width: ${widthFun(50, 50)}px;
  width: ${({ theme }) => widthFun(theme.sizes.height, theme.sizes.height)}px;
`;

Upvotes: 1

Related Questions