Coder Social home page Coder Social logo

Comments (8)

jpuri avatar jpuri commented on June 15, 2024

The reason for this issue Nik is that pseudo classes we are injecting using 'injectStyles(styles);'.
In componentWillReceiveProps we should use have:
removeStyle(this.ratingWrapperStyleId);

Before:
updatePseudoClassStyle(this._styleId, properties, this.preventFocusStyleForTouchAndClick);

Let me fix this.

from belle.

jpuri avatar jpuri commented on June 15, 2024

I have created PR: #103
There might be issues other than these also with styling, we can test more.

from belle.

nikgraf avatar nikgraf commented on June 15, 2024

good find, unfortunately it's still a problem because pseudoClass styles are only updated in the constructor or willReceiveProperties. We just call render on theme switch right now. I'm not sure we even want to handle the case people changing the config on the fly properly. As an alternative we could have a query string in the route & based on this decide the theme. When someone changes the theme we switch the URL & do a window.location.reload()

from belle.

jpuri avatar jpuri commented on June 15, 2024

Yep we can fix issue in docs by using window.location.reload() and I think the probably of users changing themes on fly is very low.

But @nikgraf , if I think from the perspective of good code structure....if theme can change dynamically its not good to bring them in react components with just
import style from '../style/button';

Probably a design like this which Vjeux told would be better:

belleComponents = new BelleComponents(stylingTheme)

Also, React component should ideally change only by user interaction or change in props..... this 'forceUpdate()' brings a feeling of something done wrong. And variables other than state and props are affecting the component.

from belle.

jpuri avatar jpuri commented on June 15, 2024

This way to configuring by changing core configurations in lib do not look good:

belle.style.button.style = _.extend(belle.style.button.style, {
color: '#FFF',
background: '#444',
border: '1px solid #444',
borderBottomColor: '#000'
});

from belle.

nikgraf avatar nikgraf commented on June 15, 2024

Hmmm, we can provide an extra API, but I had the feeling it's not necessary. The idea was that if we have simple plain JS objects then people are familiar with it & can overwrite or extend them depending on what they want.

from belle.

nikgraf avatar nikgraf commented on June 15, 2024

I think the API Vjeux proposed to create multiple stylings on one page would still be nice on top of the existing API. I fell we still should stick to the commonJS API use-case. That's what JS people are used to.

from belle.

nikgraf avatar nikgraf commented on June 15, 2024

Fixed with this PR: #109

from belle.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.