-
Notifications
You must be signed in to change notification settings - Fork 311
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
[not a bug] What is the correct way to type a CSS property, as React.CSSProperties
is not
#659
Comments
I realize that it's not really a bug and that StyleX use a different type than So I am wondering what is the correct way to type CSS properties with StyleX. |
React.CSSProperties
is not
The type are intentionally not public because dynamic styles should only be used for numbers or colors as those are the only values that are truly dynamic. You should not be using dynamic styles for values that are essentially enums. Stay tuned for more type improvements soon. |
Unfortunately this assumption is not true. Anything that accepts a length, angle, etc., can also be dynamic |
Correct. I should've used the word "numeric". Any value that contains numbers are good candidates to be set with dynamic styles. |
@olivierpascal While I look for a better solution that doesn't need importing more types, the solution in the meantime is to use the This should work. The intention is that you should never have to import this import stylex, { type StyleXStyles } from '@stylexjs/stylex';
import type {CSSProperties} from '@stylexjs/stylex/lib/StyleXCSSTypes.d.ts'
type Props = {
style: StyleXStyles;
};
export const MyDiv: React.FC<Props> = ({ style }) => (
<div {...stylex.props(style)} />
);
////////////////////////////////////////////////////////////////////////////////
const myStyles = stylex.create({
myWrap: (value: CSSProperties['flexWrap']) => ({
flexWrap: value,
}),
});
export const MyComponent: React.FC = () => (
<MyDiv style={myStyles.myWrap('wrap')} />
); |
Reopening as we're working on a related solution |
Describe the issue
Typescript is not happy when using certain properties with dynamic styles.
Expected behavior
No type error.
Steps to reproduce
Error:
The text was updated successfully, but these errors were encountered: