Hey there!
Meteor is great! I’ve been using Meteor for several small projects in the last 3 years. Lately, I’m tinkering around with React as view layer. What’s confusing me at the moment is the component styling. I’ve seen some examples where people import css files (local scope) and use implemented class styles just as variable. For example, as introduced by Scott Riley in his strtrkt project https://github.com/scott-riley/strtrkt/blob/master/src/components/Global/Btn/Btn.js
import s from "./Btn.css";
<button className={s.root} onClick={onClick}>
{children}
</button>
.root {
border-radius: 6px;
border: 1px solid;
color: var(--color-secondary);
font-weight: bold;
text-transform: uppercase;
font-size: var(--font-size-iota);
padding: 1rem;
text-decoration: none;
background: transparent;
}
Full example:
import React, {Component, PropTypes} from "react";
import s from "./Btn.css";
export default class Btn extends Component {
render() {
const {href, onClick, children, className} = this.props;
const classNames = [
s.root,
className
].join(' ');
return (
href ?
<a className={classNames} href={href}>{children}</a>
:
<button className={s.root} onClick={onClick}>
{children}
</button>
)
}
}
Btn.propTypes = {
children: PropTypes.any,
href: PropTypes.string,
onClick: PropTypes.func,
className: PropTypes.string,
};
This seems to be a pretty neat way to manage global and local css. It does not work with the latest Meteor and React version, though. Are there any packages or npm modules that I could plug in to get it work in the same way?
Roman