时间戳

首页 > 解决方案 > 如何在 CDN 中使用语义 UI？

reactjs - 如何在 CDN 中使用语义 UI？

问题描述

我已经在我的 html 文件中添加了语义 ui 的 cdn，但现在我想在我的 js 文件中使用语义 ui 编写反应代码。如何在js文件中使用semantic-ui？

我使用了 material-ui，我们使用 MaterialUi 关键字来获取组件。

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Transaction Entry</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="{% static 'images/icons/favicon.ico' %}"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <style>
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button,
        input[type=date]::-webkit-inner-spin-button,
        input[type=date]::-webkit-outer-spin-button {
          -webkit-appearance: none;
          margin: 0;
        }
        input[type=number] {
            -moz-appearance:textfield;
        }
    </style>
</head>
<body style="background-color: #0747A6">
    <!-- DO NOT CHANGE THE FOLLOWING DIV-->
    <div id="root"></div>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
    <script crossorigin src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/react-autosuggest/dist/standalone/autosuggest.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.8/uuid.js" crossorigin="anonymous"></script>
    <script type="text/babel" src={% static 'js/Signup.js' %}></script>
</body>
</html>

html文件

js/Signup.js 将有我的 js 代码。

标签： reactjssemantic-ui

解决方案

正如您在 semantic-ui-react 文档中看到的那样，没有 CDN 用法 for Components，仅用于CSS. （在 playarround CDN 中很好，但不要在产品中使用它。）
资源： https ://react.semantic-ui.com/usage/

推荐阅读