-
Hey there! So I am building a Stack layout component. There will be a prop for Also, AFAIK using something like The basic setup I have in the component for now // won't actually give me what I want, but placeholder for better idea
type JustifyContent = CSSStyleDeclaration['justifyContent'];
interface StackProps {
justifyContent?: JustifyContent;
} and then the stylex.create const alignStyles = stylex.create({
normal: {
alignContent: 'normal'
},
start: {
alignContent: 'start'
},
center: {
alignContent: 'center'
},
end: {
alignContent: 'end'
},
flexStart: {
alignContent: 'flex-start'
},
flexEnd: {
alignContent: 'flex-end'
},
baseline: {
alignContent: 'baseline'
},
firstBaseline: {
alignContent: 'first baseline'
},
lastBaseline: {
alignContent: 'last baseline'
},
spaceBetween: {
alignContent: 'space-between'
},
spaceAround: {
alignContent: 'space-around'
},
spaceEvenly: {
alignContent: 'space-evenly'
},
stretch: {
alignContent: 'stretch'
},
safeCenter: {
alignContent: 'safe center'
},
unsafeCenter: {
alignContent: 'unsafe center'
},
inherit: {
alignContent: 'inherit'
},
initial: {
alignContent: 'initial'
},
revert: {
alignContent: 'revert'
},
revertLayer: {
alignContent: 'revert-layer'
},
unset: {
alignContent: 'unset'
}
}); |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 6 replies
-
Everything is already typed in StyleX https://github.com/facebook/stylex/blob/main/packages/stylex/src/StyleXCSSTypes.js#L403 |
Beta Was this translation helpful? Give feedback.
-
as well as Was there a particular reason not to include all of the options for
import React from 'react';
import * as stylex from '@stylexjs/stylex';
import { alignContent } from '@stylexjs/stylex/lib/StyleXCSSTypes';
type AlignContent = alignContent;
interface ComponentProps {
verticalAlign?: AlignContent;
}
// seeing as I am getting all of these keys from StyleXCSSTypes,
// and they are the same as the CSS value, I wonder if there is a different way to do this?
const alignStyles = stylex.create({
flexStart: {
alignContent: 'flex-start'
},
flexEnd: {
alignContent: 'flex-end'
},
center: {
alignContent: 'center'
},
spaceBetween: {
alignContent: 'space-between'
},
spaceAround: {
alignContent: 'space-around'
},
stretch: {
alignContent: 'stretch'
},
});
const Component: React.FC<ComponentProps> = ({
verticalAlign = 'start',
}) => {
return (
<Component {...stylex.props(alignStyles[verticalAlign])}>
...
</Component>
);
};
export default Component; in this code I'll get an error of As always, my thanks! You all are the best! |
Beta Was this translation helpful? Give feedback.
-
Open a bug for missing types. And you need to use a condition like |
Beta Was this translation helpful? Give feedback.
Yeah please create bugs to report any missing types.
The
null
is to be used within the stylesIn your case if there is no style being applied anyway, you don't need
null
to remove anything.