Dfyjkt

How can I add CSS for react semantic UI ? I am using create react app. I have installed semantic-ui-react and CSS CDN: https://react.semantic-ui.com/usage/?fbclid=IwAR3ZBaJfpxHGiNcAvophLp7IAPO-gHZfDvSOLs8h-n0-_29ncPoOdjwCX7o#content-delivery-network-cdn

loginForm.js:

import React from "react";
import Button, Form, Header from "semantic-ui-react";
import styles from './loginForm.css';

const LoginForm = () => (
<Form className=styles.formStyle>
<Button className=styles.buttonStyle>Login</Button>
</Form>
);

export default LoginForm;

loginForm.css:

.formStyle 
margin-left: 500px; 
margin-top: 100px;
width: 550px;


.buttonStyle 
border-radius: 18px;
width: 200px;
background-color:#3865FE;

Above CSS code is not working for loginForm.js why so ? I also tried following :

<Form style=styles.formStyle>
 <Button style=styles.buttonStyle>Login</Button>
 </Form>

Above code is also not working.

Actually you're setting the value of className incorrectly.
Here is the modified version of your code.

import React from "react";
import Button, Form, Header from "semantic-ui-react";
import from './loginForm.css';

const LoginForm = () => (
 <Form className='formStyle'>
 <Button className='buttonStyle'>Login</Button>
 </Form>
);

export default LoginForm;

and for loginForm.css

.ui.form.formStyle 
 margin-left: 300px ; 
 margin-top: 100px ;
 width: 550px ;
 height: 400px;
 

.ui.button.buttonStyle 
 border-radius: 18px;
 width: 200px;
 background-color:#3865FE;

thanks @funJoker for suggesting me how to edit semantic-ui style.