Typing of custom props in styled

[evertheylen]

I'd like to inject some custom props into a styled component. The following code actually does what I want at runtime, but it is wrong according to typescript.

const FooComponent = styled('div')<{ foo: string }>(({ props }) => ({
  // this is wrong according to Typescript
  '--foo': props.foo,
}));

// later... (this is also wrong according to Typescript)
<FooComponent foo="bar">

The typescript errors are long and cryptic, and I've spent hours now looking at the underlying types without success. What type parameters do I have to provide for the code below to actually be accepted by typescript?

Stackblitz: https://stackblitz.com/edit/angular-7c4vrj-bzayuw?file=app.tsx

[juanrgm]

This is not possible with mui, you must use the internal ownerstate or define the custom props in a new component.

The only issue is the bad typing with the css variable.

a) Using ownerState.

import styled from '@suid/system/styled';

const FooComponent = styled('div')<{ foo: string }>(({ ownerState }) => ({
  ['--foo' as string]: ownerState.foo,
}));

<FooComponent ownerState={{ foo: 'bar' }} />
}

b) Defining a custom component.

import styled from '@suid/system/styled';
import Box from '@suid/system/Box';
import { JSX } from 'solid-js';

function Foo(props: JSX.IntrinsicElements['div'] & { foo?: string }) {
  return <Box {...props} />;
}

const FooComponent = styled(Foo, {
  skipProps: ['foo'],
})(({ props }) => ({
  ['--foo' as string]: props.foo,
}));

<FooComponent foo="bar" />

[evertheylen]

This is not possible with mui

That's too bad, but thanks for the reply!