Question

index.html

我从以下位置获取CDN文件：

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

如何访问styled函数？

const {styled} = window.styled-components不起作用。

Answer 1

对于版本5，如docs中所述，您现在需要在react-is之前加入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不是UMD，因此，如果包含此文件，则不会获得全局变量。

如果您不使用模块捆绑器或程序包管理器，我们还将在unpkg CDN上托管一个全局（“ UMD”）构建。只需将以下<script>标记添加到HTML文件的底部：

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

添加styled-components后，您将可以访问全局window.styled变量。

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

来源：https://www.styled-components.com/docs/basics#installation

如何在浏览器上使用样式化组件CDN？

2 个答案: