Skip to content

style expecting an object has unfortunate consequences.  #2976

Closed
@aronallen

Description

@aronallen

Hi,

I am pretty new to react, and I am trying to build a DIV that requests an image-scaling service on the backend for images in specific resolutions, to do this I need to use CSS image-set, this CSS value need vendor prefixes, but the CSS key does not, my problem is that I can't have duplicate keys in the style object. I ended up manually setting the style attribute in componentDidUpdate, but it is a hack to get around the system. I suggest that you could perhaps also expect an array of key value pairs, then I could do like this:

[{backgroundImage : 'value1'}, {backgroundImage : 'value 2'}]

a specific example of the css I am trying to modify can be found here.

height : 818px;
width : 1440px;
background-size : cover;
background-image : url(https://images.blockbuster.dk/movie/divergent?width=1440&height=818);
background-image : -webkit-image-set(url(https://images.blockbuster.dk/movie/divergent?width=1440&height=818) 1.0x, url(https://images.blockbuster.dk/movie/divergent?width=2880&height=1636) 2.0x);
background-image : -moz-image-set(url(https://images.blockbuster.dk/movie/divergent?width=1440&height=818) 1.0x, url(https://images.blockbuster.dk/movie/divergent?width=2880&height=1636) 2.0x);
background-image : -ms-image-set(url(https://images.blockbuster.dk/movie/divergent?width=1440&height=818) 1.0x, url(https://images.blockbuster.dk/movie/divergent?width=2880&height=1636) 2.0x);
background-image : -o-image-set(url(https://images.blockbuster.dk/movie/divergent?width=1440&height=818) 1.0x, url(https://images.blockbuster.dk/movie/divergent?width=2880&height=1636) 2.0x)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions