语义 UI React 未显示

Question

我是 React 的新手，现在正尝试向我的网站添加语义 ui。每次我尝试加载它们显示为常规 html 的组件时，而不是语义 ui 应该看起来的样子。

这是我要导出的 class 示例：

import React, { Component } from "react";
import {Radio} from 'semantic-ui-react';
const RadioExampleToggle = () => <Radio toggle />

class Contact extends Component {  
  render() {
    return (
      <div>
        <h2>DEMO PAGE</h2>
        <p>Just a demo.
        </p>
        {RadioExampleToggle()}
      </div>
    ); 
  }
}
export default Contact;

这将显示为常规单选按钮，这让我觉得很奇怪。如何让它显示语义 UI 版本。

Answer 1

请尝试从 semantic-ui.

导入 CSS 文件

进口'semantic-ui-css/semantic.min.css'

Answer 2

试试这个：

把它放在你的 index.js

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = "https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

当您的应用提供主题切换功能时，这样做也会对您有所帮助。

code sample

语义 UI React 未显示

Semantic UI React not displaying

reactjs

semantic-ui-react