Search code examples
reactjssemantic-ui-react

Semantic UI React not displaying

I am decently new to react and am now trying to add semantic ui to my website. Every time I try to load the components they show as regular html instead of how semantic ui is supposed to look.

Here is an example of a class I am exporting:

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;

This will show up as a regular radio button which is what I find weird. How do I get it to display the semantic UI versions.

Solution

  • Please try import CSS file from semantic-ui.

    import 'semantic-ui-css/semantic.min.css'