how to solve the emotion problem with typescript and typescript

Question

I am trying to create tokens with emotion but it is not working, I believe because of the typescript, because in javascript files it works. Does anyone know how to solve?

My theme:

import '@emotion/react';

export const palette = {
  common: {
    black: '000',
    white: 'fff'
  }

my component:

    import styled from '@emotion/styled';
    
    import { theme } from '../../utils/theme';    
         

      export const button = styled.button`
           background: ${({ theme }) => theme.pallete.common.black};
        `;

error:

Property 'pallete' does not exist on type 'object'

You are exporting const palette but you are importing theme and then doing nothing with theme. — Martin
– Martin, Commented Mar 22, 2021 at 15:35

daydreamer · Accepted Answer · 2021-03-22 15:12:02Z

1

You seem to have a typo

Property 'pallete' does not exist on type 'object'

while the name is palette

Try fixing the name

answered Mar 22, 2021 at 15:12

daydreamer

92.9k204 gold badges477 silver badges754 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Renan Fernandes Over a year ago

hi, it was a typo here, the code is correct and the error continues

Julien · Accepted Answer · 2022-01-12 10:56:17Z

0

Hi you can type your component like this.


interface Pallete {
 common: {
   black: '#000'
 }
}
export const button = styled.button<{ pallete: Pallete }>`
  background: ${({ pallete }) => pallete.common.black};
`;

answered Jan 12, 2022 at 10:56

Julien

931 silver badge8 bronze badges

Collectives™ on Stack Overflow

how to solve the emotion problem with typescript and typescript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related