by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Vladimir Varbanov
    @vladyn

    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...?

    Adrian
    @Leverseidge_gitlab
    Is it possible to test custom data-attributes in JSS? (e.g. <div myCustomFlag="true" … )
    (and also, side note, sign in doesn't appear to work in Chrome.. I had to use Edge)
    Vladimir Varbanov
    @vladyn
    @Leverseidge_gitlab I've tried to answer you by the way
    I had similar case
    Adrian
    @Leverseidge_gitlab
    @vladyn Hi! Thanks for your quick reply - I've updated my stack overflow question to reflect my latest efforts, following your suggestion. I'm not quite there yet, but I feel I'm close!!
    Vladimir Varbanov
    @vladyn
    Good luck @Leverseidge_gitlab ! There is actually more than one way doing this for sure.
    Adrian
    @Leverseidge_gitlab
    @vladyn It's this bit: testClass: {
    '[data-custom="value"]': {
    //styles for the custom data
    }
    } (which I'm assuming doesn't rely on @global) that I can't seem to get working. It just seems to ignore the condition entirely :( Do you have an example of it working anywhere?
    Vladimir Varbanov
    @vladyn
    the last edit is an option without using global
    Adrian
    @Leverseidge_gitlab
    @vladyn yep, it doesn't seem to work for me (i'm using the data- prefix)
    Adrian
    @Leverseidge_gitlab
    (I have edited the question again to reflect the code which I believe should be working, but is not. I'm a bit of a noob on stack exchange and here too, so I've no idea if this lengthy conversation plus re-editing my original question is "good form" or not)
    Vladimir Varbanov
    @vladyn
    @Leverseidge_gitlab, I've updated my answer regarding your edit.
    Adrian
    @Leverseidge_gitlab
    Yaaaaaay it works! I've upvoted your answer and added the completed working code. Thanks so much for your perseverance :D Might this code be a useful example to add to the JSS React example docs to help others in the future?
    Vladimir Varbanov
    @vladyn
    I'm glad it worked @Leverseidge_gitlab; as I mentioned - I've just had these challenges with the project I'm working on.
    Christian Firmi
    @cfirmi
    Just wondering if anyone has tried this with React Native?
    Mike Holm
    @coldpour

    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:

    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 JssProvider

    am I doing it wrong?

    LcsDrpr
    @LcsDrpr
    Hello everybody !
    I'm trying desperately to use keyframes and it doesn't work at all. i'm followed every steps in the doc but, still, nothing happen. Do any of you had this issue as well ?
    Thanks a million
    Adrian
    @Leverseidge_gitlab
    @coldpour I got that too. In my case, it was because I was using Material UI. In that case, you have to use StylesProvider from @material-ui/core/styles instead of JssProvider, otherwise you get that error message. I've added a comment to the original Stack Overflow q to reflect that.
    (this did cause the &.Mui-selected selectors to fail on the MUI ToggleButton, so I had to replace that with a normal Button and use a data-attribute for selected... don't know if that's a JSS issue or if I'm doing some else wrong though)
    Adrian
    @Leverseidge_gitlab
    There's an example under JSS Plugins on the MUI website, should that be your problem: https://material-ui.com/styles/advanced/ More generally, I think it might be worth linking this part to the JSS docs, save others the same issue.
    Mike Holm
    @coldpour
    thanks @Leverseidge_gitlab ! I'll give that a go
    shilpasjoshi2
    @shilpasjoshi2
    Hi

    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
    Vladimir Varbanov
    @vladyn
    Hello 👋 @shilpasjoshi2, you may have to provide your dedicated component with the style class(es) composed by the JSS somehow. This may happen in a few ways:
    • 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
      const { className1, classNName2 } = JSS.createStyles().....attach();
       // then somehitng like
       <ListItem classes={ className1, classNName2 }>
      maybe somehting like that could work?
    George W Langham
    @GeorgeWL
    Loving the 404 page on the docs
    very well made
    on a related note - looks like the routing is broken on the docs, tryin to read up on an older version and all the ruotes 404 https://cssinjs.org/?v=v8.6.1
    Oleg Isonen
    @kof
    this is probably because we never thought about what happens if markdown files get moved
    George W Langham
    @GeorgeWL
    ah that's fair enough, stuff like that happens sometimes
    Suibin
    @suibinhong_twitter
    Hi i'm looking to use jss with iframe via react-frame-component, and also using global style. Is it possible?
    I've tried the following approach
    image.png
    image.png
    seems to be getting empty data-jss
    edmond Kacaj
    @edmondi18_twitter
    Hello , I'm looking to find a solution for my project , and I have a question , With JSS library is possible to change style after build , fo example I have same build but different clients , and I want to change style after build in base of Clients
    Valtteri Laine
    @Waltari_gitlab
    Vladimir Varbanov
    @vladyn
    you can just add it like:
    'input::-webkit-inner-spin-button': { '-webkit-appearance': 'none' }
    Andrés
    @andresecbu_twitter
    what means this error [JSS] Could not find the referenced rule error in makeStyles. ???
    Дезигнер
    @dezignerovich_twitter
    Hello. I have been studying JSS for a month now and want to say that this is a great library!
    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:
    Дезигнер
    @dezignerovich_twitter
    image.png
    And App component with button counter:
    image.png
    image.png
    And when the app starts in the console you will get
    Chance
    @chanced
    i'm trying to check the output of some jss using the cli; if i use jss convert ./source.js -f css > source.css i don't get an output while jss convert source.js -f css > source.css fails, complaining 'source' is undefined (the source.js file exists)

    in either case, ./source.js, or source.js the source.css file is created but is blank.

    my js file is just a....

    i just figured it out
    you probably want to add a note on the cli documentation that the module.exports needs to be the jss (in retrospect, it's silly... i dont know why i thought it work otherwise
    Isa Ugurchiev
    @IsaUgurchiev
    I use React Shadow Root and every component has its own styles how can I apply these styles? Can JSS help me?
    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);