stylex icon indicating copy to clipboard operation
stylex copied to clipboard

Allow nested objects within stylex.create for importing purposes

Open Rynebenson opened this issue 3 years ago • 0 comments

I would like to define styles once and import throughout my app.

[styles.js]
import { margin } from './margin'

const styles = stylex.create({
  margin
});

export default styles
[margin.js]
export const margin = {
  micro: {
    margin: 4
  },
  small: {
    margin: 8
  },
  top: {
    micro: {
      marginTop: 4
    },
    small: {
      marginTop: 8
    }
  }
}
[component.js]
import styles from './styles'

function Component() {
  return (
    <div className={stylex(styles.margin.small)}>
      <button className={stylex(styles.margin.top.micro)}>
        Click Me!
      </button>
    </div>
  )
}

Rynebenson avatar Nov 26 '21 02:11 Rynebenson