CODEWITHSUNDEEP
reactjstypescriptstyled-components
Tomasz Waszczyk
Tomasz Waszczyk

Reputation: 3169

Control styling attribute of component via props

Having following code:

export type BreadcrumbItemProps = {
  isCurrent?: boolean;
};

const isCurrent = (props: { isCurrent?: boolean }) => props.isCurrent ? 'normal' : 'bold';

export const Item = styled.span<BreadcrumbItemProps>`
  display: inline;
  padding: 10px;
  cursor: default;
  font-weight: ${ props => isCurrent(isCurrent)};
`;

Depending on isCurrent props I want to control font, either normal or bold, trying to do it I got following error:

const isCurrent: (props: { isCurrent?: boolean | undefined; }) => "normal" | "bold" Type '(props: { isCurrent?: boolean | undefined; }) => "normal" | "bold"' has no properties in common with type '{ isCurrent?: boolean | undefined; }'.ts(2559)

Upvotes: 0

Views: 52

Answers (2)

Maria
Maria

Reputation: 295

You don't need a function, you should just be able to do the logic inline like so:

export type BreadcrumbItemProps = {
  isCurrent?: boolean;
};

export const Item = styled.span<BreadcrumbItemProps>`
    display: inline;
    padding: 10px;
    cursor: default;
    font-weight: ${ props.isCurrent ? 'normal' : 'bold'};
`;

Upvotes: 3

Ga&#235;l S
Ga&#235;l S

Reputation: 1569

I guess it should be:

font-weight: ${ props => isCurrent(props)};

instead of

font-weight: ${ props => isCurrent(isCurrent)};

Upvotes: 1

Related Questions