Reactjs 如何在cdn中使用语义ui？_Reactjs_Semantic Ui

Reactjs 如何在cdn中使用语义ui？

reactjs

Reactjs 如何在cdn中使用语义ui？,reactjs,semantic-ui,Reactjs,Semantic Ui,我在html文件中添加了语义ui的cdn，但现在我想在js文件中使用语义ui编写react代码。如何在js文件中使用语义ui 我使用了MaterialUi，其中我们使用MaterialUi关键字来获取组件 {% load static %} <!DOCTYPE html> <html lang="en"> <head> <title>Transaction Entry</title> <meta charset="

我在html文件中添加了语义ui的cdn，但现在我想在js文件中使用语义ui编写react代码。如何在js文件中使用语义ui

我使用了MaterialUi，其中我们使用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>

{%load static%}
交易记录
输入[类型=编号]：-webkit内部旋转按钮，
输入[类型=编号]：-webkit外部旋转按钮，
输入[类型=日期]：-webkit内部旋转按钮，
输入[类型=日期]：-webkit外部旋转按钮{
-webkit外观：无；
保证金：0；
}
输入[类型=数字]{
-moz外观：textfield；
}

Html文件

js/Signup.js将包含我的js代码。

正如您在语义ui react文档中看到的那样，

组件不使用CDN，只用于CSS
。（在PlayaRound CDN中可以，但不要在产品中使用它。）

资源：