如何在浏览器上使用 styled-components CDN 构建？

Question

index.html

I'm getting the CDN file from:

<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.3.2/styled-components-macro.cjs.min.js"></script>

How can I access the styled function?

const {styled} = window.styled-components doesn't work.

Answer 1

For version 5, as mentioned in the docs you now need to include react-is before styled-components

<!-- react, react-dom dev bundles -->
<script crossorigin src="//unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="//unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<!-- react-is -->
<script crossorigin src="//unpkg.com/react-is/umd/react-is.production.min.js"></script>

<!-- styled-components -->
<script crossorigin src="//unpkg.com/styled-components/dist/styled-components.min.js"></script>

<script>
  const Component = window.styled.div`background-color: green;`;
</script>

Answer 2

styled-components-macro.cjs.min.js is not UMD , so if you include this file you did not get global variable.

If you're not using a module bundler or package manager we also have a global ("UMD") build hosted on the unpkg CDN. Simply add the following <script> tag to the bottom of your HTML file:

<script src="//unpkg.com/styled-components/dist/styled-components.min.js"></script>

Once you've added styled-components you will have access to the global window.styled variable.

const Component = window.styled.div`
  color: red;
`

source: https://www.styled-components.com/docs/basics#installation

---

UPDATE FROM OP:

Newer versions has stopped working (probably v5) from the URL above. But it's still working like this on v4:

<script src="//unpkg.com/styled-components@4.0.1/dist/styled-components.min.js"></script>