@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.scss
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.
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?
RuleList::toString()
method..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)'
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?
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',
},
},