How to use css properties (needed for Spacing, Text Styles, etc) in Typescript?

[flyingnobita]

In my Landing.tsx file:

import { Main, textStyle } from "@aragon/ui";
import React from "react";

const Landing = () => {
  return (
    <Main>
      <div
        css={`
          ${textStyle("title1")};
        `}
      >
        Title 1
      </div>
    </Main>
  );
};
export default Landing;

I get the error:

Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322)

I tried to add the type declaration in my .d.ts file (taken from here):

import { CSSProp } from "styled-components";
declare module "styled-components" {
  export interface DefaultTheme {}
}

declare module "react" {
  interface Attributes {
    css?: CSSProp;
  }
}

This suppressed the error but my text was still not formatted.

Perhaps a separate issue, I noticed that even if my file was renamed to Landing.js, the text was still not formated. Perhaps this is related to something else... 🤔 (I haven't encountered problems with other components TextInput, Field, yet though)

For context, I'm using aragin UI in a vanilla create-eth-app.

[welcome[bot]]

Thanks for opening your first issue in aragonUI! Someone will circle back soon ⚡

[yuetloo]

You also need to enable Babel plugin, see doc here https://styled-components.com/docs/api#css-prop.

I was able to enable it by making these changes.. https://github.com/aragon/govern/commit/33b94f9eb5eca34f8a88190566db398e112193f7

[flyingnobita]

Thanks for the reply.

Do you know if it'll work without react-app-rewired?

[yuetloo]

react-app-rewired was used to set up babel. If you set up babel differently, without react-app-rewired, I think it'll work.