Replies: 2 comments 8 replies
-
|
I think this will likely need to be done in the same way that bootstrap implements it post-build (by having bunch of copy paste). Unless you use dynamic styles, StyleX fundamentally builds down to plain css (same with bootstrap). We don't have a way of doing build-time compiling across files. Using dynamic styles for this is overall worse than a bunch of copy paste though because dynamic styles are inline, so you are creating a lot of extra non-deduplicated styles. To avoid using dynamic styles for this, you should just define styles for every numbered column break you need. You could do the column definitions in a
const extraSmall = '@media (min-width: 0) and (max-width: 640px)';
...
export const gridVars = stylex.defineVars({
col1: {
[extraSmall]: 'repeat(1, 1fr)',
...
},
col2: {
[extraSmall]: 'repeat(2, 1fr)',
...
},
...
});Then use it like import {gridVars} from './grid.stylex.js';
const styles = stylex.create({
gridCol1: {
display: 'grid',
gridTemplateColumns: gridVars.col1
},
gridCol2: {
display: 'grid',
gridTemplateColumns: gridVars.col2
}
});
function MyComponent() {
return <div {...stylex.props(styles.gridCol1)}/>
}StyleX is designed such that the style de-duplication should happen at build time, and developers should not have to worry about writing duplicate styles. We actually prefer a little verbosity here. You technically could export the |
Beta Was this translation helpful? Give feedback.
-
|
I wanted to give you another alternative that should be preferable: Accept a
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I've been trying to make a bootstrap-like column system where I can use COL-SM-X COL-LG-X COL-MD-X etc but I've found it impossible since I would have to create a property for each element and apply the media queries, is there a way to do this without repeating spaghetti code?
I could do something with grid but I would still have to somehow inject a calculation of the child components and this would imply more dynamism to calculate how much space they are occupying.
grid.stylex.js
grid-component.tsx
Beta Was this translation helpful? Give feedback.
All reactions