search

mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
389 stars 18 forks source link

[react] Create Hidden component #146

Closed siriwatknp closed 1 week ago

siriwatknp commented 1 week ago

Summary

With a flip perspective, I am able to create the Hidden with the same API using the existing generateAtomics fn.

Instead of declaring xs, … xl as conditions, I use the prop name xsUp, xsDown, xsOnly, … xlUp, xlDown, xlOnly as conditions.

In the component, it reads the runtime theme to find the breakpoint keys and compose the display atomic object:

// user code
<Hidden smUp>

// runtime
atomic({
  display: {
    smUp: 'none', // this will get the className for `smUp`
  }
})

Test

See packages/pigment-css-react/tests/generateAtomics.test.js