Overriding component style

[kserjey]

Can u add something like 'css' prop in glamorous? I think it might be useful when u want specify just a margin.

<MyStyledComponent css={{ marginBottom: 8 }}/>

[lttb]

Hi @kserjey!

That's a nice point, thanks.

But it looks like it may have the same problems as described here https://github.com/cssinjs/styled-jss/issues/41#issuecomment-337799548, because it causes the styles recalculation on each mount/rerender.

As a workaround, you can use style attribute for inline styles in such cases.

You can also pass the className with class, created by the jss, for example:

// css.js

const sheet = jss.createStyleSheet().attach();
const cache = new Map()

export default styles => {
  if (cache.has(styles)) return cache.get(styles)

  const rule = sheet.addRule(styles)
  cache.set(styles, rule)

  return rule
}

import css from './css'

const {className} = css({marginBottom: 8})

<MyStyledComponent className={className} />

Maybe it will be valuable to make a function like this css as a helper in this library.

But I hope to find an effective implementation for the suggested behavior, and, of course, we're open for PRs :)

[kof]

I am also thinknig to have such a function in the core JSS.