Closed drbruddet closed 7 years ago
@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.
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
@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>
)
}
Okey, I see, thank you very much for the component idea.
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:<strong className={tag}>Something</strong>
Don't know if it exist already, I can't find the way how to do it.
Thanks