Semantic UI React not displaying

Question

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.

Is the css loaded in the site? Does anything look like Semantic UI? Can you confirm if the HTML looks like what SemanticUI html should look like? — TKoL
– TKoL, Commented Nov 12, 2019 at 15:11
Everything looks like plain HTML with no styling. Though the only part that should be styled would be the radio button to my knowledge, since its the only one loaded in — Lain
– Lain, Commented Nov 12, 2019 at 15:14
So the html doesn't have any classes that say stuff like 'ui ...' in it? Based on some cursory reading, it looks like semantic ui HTML has html with classes like class="ui active button" — TKoL
– TKoL, Commented Nov 12, 2019 at 15:15
Correct, regular semantic UI does. I did not use this. Here is an example of a button in react. react.semantic-ui.com/elements/button Just open in sandbox. It is the same type of way I am trying to do radio button — Lain
– Lain, Commented Nov 12, 2019 at 15:16
It is working fine! I think you haven't imported the cdn tag in public/index.html folder here is the working code link codesandbox.io/s/zen-spence-2yd1f?fontsize=14 — Ronak07
– Ronak07, Commented Nov 12, 2019 at 15:18

Jing Yu · Accepted Answer · 2019-11-12 15:16:52Z

4

Please try import CSS file from semantic-ui.

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

answered Nov 12, 2019 at 15:16

Jing Yu

1,63113 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lain Over a year ago

Hi, im using semantic ui react. not semantic UI. I installed it with yarn. Its why my code doesnt toss an error and still displayed a radio button. See here react.semantic-ui.com/usage

Jing Yu Over a year ago

Yes. but after install, you will need to import css file manually. prntscr.com/pvygox

genzdev · Accepted Answer · 2019-11-12 15:28:23Z

1

Try this:

Put it in your 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);

Doing it this way will also help you when your app offers theme switching functionality.

code sample

answered Nov 12, 2019 at 15:28

genzdev

737 bronze badges

Collectives™ on Stack Overflow

Semantic UI React not displaying

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related