Importing const classes ?

[drbruddet]

Hey,

I have a theme.js file where I have some const for colors. I know in styled-jsx, I can use a const for like: color: blue. But my question is, is there a way to have a custom class, then I can set in my config file and import it like:

const tag = {
           color: black;
            font-weight: 700;
            transition: all 0.4s 0.2s ease-in-out;
            border-radius: 5px;
            padding: 1px 3px;
            background-color: yellow;
            text-decoration: none;
}

export { theme, tag }

<strong className={tag}>Something</strong>

Don't know if it exist already, I can't find the way how to do it.

Thanks

[giuseppeg]

@guillaumeko we don't support CSS in the form of object literals. If you prefer JS objects to strings you can take a look at glamor, glamorous, jss, styletron etc.

[drbruddet]

thanks for the answer @giuseppeg . Its not mainly a js object, I just wish to find a way to put a class in a config file and call it in some components I need this class, without repeating all code cause it's the same. Is there a way ? Thanks

[giuseppeg]

@guillaumeko the solution is #147 but unfortunately it is not implemented yet (it shouldn't take long tho). You could use a component like:

const Tag = ({elem = 'span', children, ...props}) => {
  const TagName = elem
  return (
    <TagName className="tag" {...props}>
      {children}
      <style jsx>{`
        .tag {
          color: black;
          font-weight: bold;
          transition: all 0.4s 0.2s ease-in-out;
          border-radius: 5px;
          padding: 1px 3px;
          background-color: yellow;
          text-decoration: none;
        }
      `}</style>
    </TagName>
  )
}

[drbruddet]

Okey, I see, thank you very much for the component idea.