Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ownerState type safety in variants #186

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

pushys
Copy link

@pushys pushys commented Jul 26, 2024

This would allow to type safely use ownerState's properties in styled's variants without providing a callback.

The problem is that now the example below works as intended (a new class name is correctly applied when rounded is true), but the compiler complains because it doesn't know anything about ownerState's type (only props overall).

import { styled } from '@pigment-css/react';

const StyledDiv = styled('div')<{ ownerState: { rounded: boolean } }>(
  {
    backgroundColor: 'blue',
    variants: [
      { props: { rounded: true }, style: { borderRadius: 8 } },
    ],
  },
);

function App() {
  return <StyledDiv ownerState={{ rounded: true }}>div</StyledDiv>;
}

export default App;

Or maybe I misunderstood something and ownerState isn't supposed to be used without a callback.

@zannager zannager added the package: system Specific to @mui/system label Jul 29, 2024
@zannager zannager requested a review from brijeshb42 July 29, 2024 13:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: system Specific to @mui/system
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants