Skip to content

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.

Signed-off-by: Eugene <evgeny.dknv@gmail.com>
@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
@afatoga
Copy link

afatoga commented Jul 21, 2025

I am wondering if ownerState is needed at all. According to docs you can use props just so https://github.com/mui/pigment-css?tab=readme-ov-file#styling-based-on-props

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.

3 participants