If I am using Material-ui for some components, is it worth it to use react-jss, or should I just rely on Material-ui's makeStyle?
@kof Is there any performance advantage/disadvantage for calling createUseStyles() inside of a component rather than before it?
I would assume that would cause it to recalculate on each render but it allows accessing props directly without having to explicitly pass them to your useStyles() hook.
variables.scssI used to import it and use the variables in my scss files
component.scss file by doing @import '../../../node_modules/company/variables' now I want to use react-jss and obviously i can not import the scss file in my component.tsx
@lpgarzonr When we made the change from scss to react-jss I created a file that we now put all of our variables in. Just standard js objects, or typescripts enums, and import what I need.
ie:
export const colors: {
primaryBlue: #xxxxxx
}And then in my component I import colors like a normal js variable.
2 replies
Hi all,
I've written this plugin:
import type { Plugin, Rule, StyleSheet } from "jss";
const PARENT_SELECTOR = "#my-global-selector";
const plugin: Plugin = {
onProcessRule: function (rule: Rule, sheet?: StyleSheet) {
var parent = rule.options.parent as Rule;
const cssRule = (rule as unknown) as CSSStyleRule;
const ignore =
rule.type !== "style" ||
(parent && parent.type === "keyframes") ||
!cssRule.selectorText ||
cssRule.selectorText.includes(PARENT_SELECTOR);
if (!ignore) {
cssRule.selectorText = `${PARENT_SELECTOR} ${cssRule.selectorText}`;
}
},
};
export default plugin;The goal is to add #my-global-selector as the parent selector for every single generated rule.
I am running into issues where one rule can have the selecor multiple times, is there a better way to write this?
gets the job done, but I'd rather use my ID for readability
RuleList::toString() method.That is a wrong way from the architecture OOP principles, but it is the most non-breaking way for the whole JSS workflow.
After calling
.toString() method JSS work is done and in this point I can make own job with sorting, combining and returning CSS output.
Hello, I'm having a problem with MUI and jss, for some reason style content is getting removed after function values execution, this doesn't have an impact on the UI, but the DOM reference for the styles get lost.
For instance two classes get generated jss1 and jss2, but only jss1 actually exist in the DOM while inspecting, but there is no reference for jss2 anywhere.
Any idea why is this happening?
What is the syntax of transform: rotate(90deg) in JSS?
I found it in the thread, that is transfrom: 'rotate(90deg)'
I wanted to read and know about the performance of jss.
http://jsperf.com/jss-vs-css/3
this link (from /performance page on site) keep giving me 500 error
can anyone give me a link about it or give me anything that could help me?
thanks alot
guys how to write this css with react-jss
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
{
transition: 'color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out'
}{
left: 'min(calc(100vw - 1200px) / 2, 0)'
}
'.class1, .class2': {
// values
}Quick question if anyone has an opinion about this I'd love to hear it.
We're currently using Material-UI throughout our app. About 8 months ago I started using react-jss to handle our styling(before it was purely css/sass).
Given the fact that we're using Material-UI is it worth using react-jss, and createUseStyles, over using Mui's makeStyles?
5 replies
Hey all, is there a way to define multiple classes simultaneously using JSS?
I'm trying to achieve this behavior:.class1, .class2 { // values }
Hey Daniel, yes you can do that!
https://cssinjs.org/react-jss/?v=v10.6.0#basic
That shows a simple usage of it. But you can target classnames like that as well.
Example code:
blueButton: {
color: 'blue',
},
redButton: {
extend: 'button',
background: 'linear-gradient(to right, red 0%, green 100%)',
'& blueButton': {
color: 'purple !important',
},
},
