I use the jss package to write styles in js.
Writing:
import React, { Component } from 'react'; import jss from 'jss' import preset from 'jss-preset-default' jss.setup(preset()); // Create your style. const style = { header: { backgroundColor: '#eee', height: '40px', } }; const sheet = jss.createStyleSheet(style); sheet.attach(); sheet.toString(); const {header} = sheet.classes; export default class Header extends Component { render () { return (<div className={header}/>) } } AND
import React, { Component } from 'react'; import jss from 'jss' import preset from 'jss-preset-default' jss.setup(preset()); // Create your style. const style = { menu: { backgroundColor: '#eee', height: '40px', } }; const sheet = jss.createStyleSheet(style); sheet.attach(); sheet.toString(); const {menu} = sheet.classes; export default class Menu extends Component { render() { return ( <menu className={menu}> {this.props.links.map((link, i) => <a key={i} href='/'><span>{link.img}</span><span>{link.text}</span></a>)} </menu> ) } } Menu.defaultProps = { links: [{ img: null, text: 'Профиль', }, { img: null, text: 'Задачи', }, { img: null, text: 'Карта знаний', }, { img: null, text: 'Поединки', }] }; I expect the styles to appear in the same <style></style> block in head , but I get different blocks:
The documentation did not find a solution. Can anyone come across, I will be very grateful!
