Guys, I have a question regarding the approach on JSS style creation:
So I have an app with components, and I've decided in each component to load its styles and call jss.createStyles(buttonComponentStyles) // for example.
My question is: Is that affect the bundle size? And is there a better pattern of applying the styles? Is each time on JSS import a new JSS is added to the bundle?
Also, I've tried to remove the above approach and added everything in the main.js file and have noticed no significant difference, which probably answers with "Yes" to my first question or...?
hey I just updated my react-jss, jss, and jss-preset-default dependencies to 10.1.1, and I've got a custom jss instance as described by the docs:
- https://cssinjs.org/jss-preset-default/?v=v10.1.1#setup-custom-jss-instance
- https://cssinjs.org/react-jss/?v=v10.1.1#custom-setup
and I'm getting a prop type warning:
checkPropTypes.js:20 Warning: Failed prop type: Invalid prop `jss` of type `Jss` supplied to `JssProvider`, expected instance of `Jss`.
in JssProvideram I doing it wrong?
Need some help regarding jss react please
I have a requirement in jss react where in we need to use content list, but instead of writing html directly in the map function, we want to keep it separate in some component and use that component in the map function for iteration.
Can some body please help me in this.
5 replies
- thought the props
- thought the state
A quick picture of it may be figured out like; You compose the styles in the parent component with JSS and attach it. You extract the classes from it - something like
maybe somehting like that could work?const { className1, classNName2 } = JSS.createStyles().....attach(); // then somehitng like <ListItem classes={ className1, classNName2 }>
With her, I started developing my own design system JSS + Functional Components + Hooks and so I reached the point of optimizing the rendering and noticed
that each of my components was rendered 2 times.
I started to understand the problem and wrote a quick example where, due to the counter update,
the weather is rendered although its state is not updated,
React.Memo () is naturally solved, but two calls are made when logging the render to the console.
I enclose a code and an example of output to the console.
Someone can say why this happens and it will affect productivity?
Weather Component for Example:
in either case, ./source.js, or source.js the source.css file is created but is blank.
my js file is just a....
class Main extends React.Component {
render() {
return (
<ReactShadowRoot>
<Header/>
<Content/>
<Footer/>
</ReactShadowRoot>
)
}
}
const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<Main />, app);