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.
Please try import CSS file from semantic-ui.
import 'semantic-ui-css/semantic.min.css'
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
Related
I created a typescript react app and installed ant design in it. Upon calling the Button Element just like in the their documentation I am getting this error. I looked up everywhere but I am not getting any solution for my problem.
this is my React Code.
import { FC } from 'react';
import { Button } from 'antd'
import './App.css';
const App: FC = () => {
return (
<div className="App">
<Button type='primary'>Button</Button>
</div>
);
}
export default App;
I think this is ant design related. Thanks for anyone who can help.
I am currently using the react-barcode package. It is currently using the format="CODE128" format, I needed to change it to use the Code 39 Barcode Font. How to I import the font to my react project and use it in the react-barcode component. If its not possible is there any other components I can use to achieve this.
Code:
import React, { Component } from 'react';
import Barcode from 'react-barcode';
class Posts extends Component {
render () {
return (
<div>
<Barcode value="http://github.com/kciter" />
</div>
);
}
}
export default (Posts);
Display of the
code128 barcode
React-barcode doesn't use a barcode font at all.
You can just, following the docs, set format="CODE39".
<Barcode value="123456" format="CODE39" />
Now, I am stuck for several hours trying to make Storybook work with antd in my new React application (created with create-react-app), without success.
Whatever I do, Storybook does not take the styling of antd.
For example, I created a menu item with antd:
menuNav.tsx:
import React from "react";
import {Menu} from 'antd';
import "antd/dist/antd.less";
const MenuNav = () => {
return (
<Menu mode="horizontal">
<Menu.Item key="menu1">
This is my menu title
</Menu.Item>
</Menu>
)
}
export default MenuNav;
But the result looks like this, no styling at all, but a list:
And as you can see here, it understands that the menu is created by the UI library, but there is no antd styling applied:
This is the story file of MenuNav, 3-Menu.stories.js:
import React from "react";
import MenuNav from '../components/MenuNav';
export default {
title: "MenuNav",
component: MenuNav,
};
export const Text = () => <MenuNav></MenuNav>
I already tried to add a config.js inside ./storybook as suggested here, with no success. Furthermore, I tried adding a webpack.config.js in the same directory as recommended here, same result.
What am I doing wrong?
try adding #import '~antd/dist/antd.css'; to your applications main file, let say index.css which for example is placed in src folder and then add import '../src/index.css'; to .storybook/preview.js
`
I'm trying to use this css style to styling my react app. But the css didn't work in my element, how to solve it ?
import React, { Component } from 'react';
import style from './styles/css/bootstrap.css';
class App extends Component {
render() {
return (
<div>
<button className={style['btn', 'btn-primary']}>test button</button>
</div>
);
}
}
export default App;
import style from './styles/css/bootstrap.css';
What are you expecting the import to do? If it is to just include the css, then you don't need to give it a name.
import './styles/css/bootstrap.css';
Should be enough.
style['btn', 'btn-primary']
Styling in react comes in various flavours. I would recommend reading the official documentation for it. Assuming you just want to use the classes: btn and btn-primary, you can just pass them to react as:
<button className="btn btn-primary">test button</button>
Im using preact-material-components on PWA.
I want to add a Select Menu so I can do like this:
import { h, Component } from 'preact';
import Select from 'preact-material-components/Select';
import 'preact-material-components/Select/style.css';
and then
export default class Home extends Component {
render() {
return (
<div class={style.home}>
<h1>Home route</h1>
<Select>
<Select.Item>Frutas y Verduras</Select.Item>
<Select.Item>Farmacia</Select.Item>
<Select.Item>Comida Rapida</Select.Item>
<Select.Item>Limpieza</Select.Item>
</Select>
</div>
);
}
}
But the Select Menu is not looking good at all, I can see with dev tools that the styles are being imported but it looks like something is wrong with CSS, I'm new to React so I would like to know your opinion about this code.
If you are using this component individually, DO NOT FORGET to import 'preact-material-components/Menu/style.css' and 'preact-material-components/List/style.css'
from https://material.preactjs.com/component/select