css prop does not override if provided without enclosing { }

This is a bug report. react-spinners version 0.5.3.

The css prop is documented to override the default css, but it does not actually do this, if used like in the documentation, for example like this in my case:

  const cssOverride = css`
    margin: 20% auto 40%;
    display: block;
  `;

  const loader = (
    <ClipLoader
      css={cssOverride}
    />
  );

The display: block; is correctly added, but in a way that it does not override the default display: inline-block (the respective <style data-emotion="css"></style> is added earlier in the DOM).

However, if I enclose the css string in { } inside the template literal, it does override:

  const cssOverride = css`{
    margin: 20% auto 40%;
    display: block;
  }`;

This seems to be the way the default styles are written as well. I’m not experienced with emotion-js, so I cannot explain why that makes the object precedence work as intended, but it seems that’s how it works.

[mountwebs]

This is still an issue for me.

[eoghanmccarthy]

This issue still persists in 0.6.1