How can I add CSS for react semantic UI ? I am using create react app. I have installed semantic-ui-react and CSS CDN: /?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.

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./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.

• javascript
• css
• reactjs

• 1 facebook.github.io/create-react-app/docs/… according to this, everything should works fine unless your cra app is outdated, did you try to use your css module without semantic ? Maybe semantic override your css, thus it's working but not visible – Fabien Greard Commented Nov 14, 2018 at 5:19
• @FabienGreard So what is the fix for this problem ? I am using create react app – fun joker Commented Nov 14, 2018 at 5:21

1 Answer 1

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.