[jss-global] Can't change styles dynamically

RamonBalthazar commented 6 years ago

I'm trying to dynamically change the font for body from inside my CustomThemeProvider using props but it works only for the first time, whenever I send new props to CustomThemeProvider the body style remains untouched.

Sample code:

...

const stylesheet = {
  '@global': {
    body: {
      fontFamily: props => getFontFamily(props.site.styles.font),
    },
  },
};

export default injectSheet(stylesheet)(CustomThemeProvider);

kof commented 6 years ago

Can you please show an example on codesandbox without CustomThemeProvider in order to make sure the problem is in jss?

kof commented 6 years ago

@RamonBalthazar any updates?

aslafy-z commented 6 years ago

Same for me, I just reproduced it here: https://codesandbox.io/s/vml5lxmvy

kof commented 6 years ago

tbc in https://github.com/cssinjs/jss/issues/682

DurgaPammi commented 5 years ago

how can we right the JSS for the below example :

               <Collapsible trigger="Start here">
<p>This is the collapsible content. It can be any element or React component you like.</p>
                              </Collapsible>

CSS is:

.Collapsibletrigger { display: block; font-weight: 600; text-decoration: none; color: #ffffff; position: relative; border: 1px solid white; padding: 10px; background: #f3f4f4; color: black; } .Collapsibletrigger:after { font-family: 'FontAwesome'; content: '\f107'; position: absolute; right: 10px; top: 10px; display: block; transition: transform 300ms; } .Collapsibletrigger.is-open:after { transform: rotateZ(180deg); } .Collapsibletrigger.is-disabled { opacity: 0.5; background-color: grey; }

Can You please any one help me about this

cssinjs / jss

[jss-global] Can't change styles dynamically #602