How can I style react semantic components?

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.

asked Nov 14 '18 at 5:00

fun joker

460110

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
Nov 14 '18 at 5:19

@FabienGreard So what is the fix for this problem ? I am using create react app

– fun joker
Nov 14 '18 at 5:21

add a comment |

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.

asked Nov 14 '18 at 5:00

fun joker

460110

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
Nov 14 '18 at 5:19

@FabienGreard So what is the fix for this problem ? I am using create react app

– fun joker
Nov 14 '18 at 5:21

add a comment |

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.

asked Nov 14 '18 at 5:00

fun joker

460110

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

asked Nov 14 '18 at 5:00

fun joker

460110

asked Nov 14 '18 at 5:00

fun joker

460110

asked Nov 14 '18 at 5:00

fun joker

460110

asked Nov 14 '18 at 5:00

fun joker

460110

asked Nov 14 '18 at 5:00

fun joker

460110

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
Nov 14 '18 at 5:19

@FabienGreard So what is the fix for this problem ? I am using create react app

– fun joker
Nov 14 '18 at 5:21

add a comment |

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
Nov 14 '18 at 5:19

@FabienGreard So what is the fix for this problem ? I am using create react app

– fun joker
Nov 14 '18 at 5:21

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
Nov 14 '18 at 5:19

@FabienGreard So what is the fix for this problem ? I am using create react app

– fun joker
Nov 14 '18 at 5:21

add a comment |

1 Answer
1

active

oldest

votes

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.

edited Nov 14 '18 at 6:32

answered Nov 14 '18 at 5:15

Varun Arya

465

What changes do I need to make in loginForm.css ? Also why import styles if you are not using it in component ?

– fun joker
Nov 14 '18 at 5:20

You don't have to make any changes in css file. Since you want to add your own custom css style in semantic component you have to import the css file in LoginForm.js file.

– Varun Arya
Nov 14 '18 at 5:29

I guess you're confused about how to use imported css in js file. Actually react has JSX syntax which is similar to html so just like in html when you add style style to your component you set it by either "id" or "class". In react you can do this by importing the css file and setting the component style by setting the value of className props. You should got throught the below link of React about JSX. reactjs.org/docs/introducing-jsx.html

– Varun Arya
Nov 14 '18 at 5:40

Your code is not working see this screenshot ->imgur.com/a/J2UAkty

– fun joker
Nov 14 '18 at 5:59

codesandbox.io/s/y3o187k1r9 Here's my code.

– Varun Arya
Nov 14 '18 at 6:04

|
show 4 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53293450%2fhow-can-i-style-react-semantic-components%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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.

edited Nov 14 '18 at 6:32

answered Nov 14 '18 at 5:15

Varun Arya

465

What changes do I need to make in loginForm.css ? Also why import styles if you are not using it in component ?

– fun joker
Nov 14 '18 at 5:20

You don't have to make any changes in css file. Since you want to add your own custom css style in semantic component you have to import the css file in LoginForm.js file.

– Varun Arya
Nov 14 '18 at 5:29

I guess you're confused about how to use imported css in js file. Actually react has JSX syntax which is similar to html so just like in html when you add style style to your component you set it by either "id" or "class". In react you can do this by importing the css file and setting the component style by setting the value of className props. You should got throught the below link of React about JSX. reactjs.org/docs/introducing-jsx.html

– Varun Arya
Nov 14 '18 at 5:40

Your code is not working see this screenshot ->imgur.com/a/J2UAkty

– fun joker
Nov 14 '18 at 5:59

codesandbox.io/s/y3o187k1r9 Here's my code.

– Varun Arya
Nov 14 '18 at 6:04

|
show 4 more comments

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.

edited Nov 14 '18 at 6:32

answered Nov 14 '18 at 5:15

Varun Arya

465

What changes do I need to make in loginForm.css ? Also why import styles if you are not using it in component ?

– fun joker
Nov 14 '18 at 5:20

You don't have to make any changes in css file. Since you want to add your own custom css style in semantic component you have to import the css file in LoginForm.js file.

– Varun Arya
Nov 14 '18 at 5:29

I guess you're confused about how to use imported css in js file. Actually react has JSX syntax which is similar to html so just like in html when you add style style to your component you set it by either "id" or "class". In react you can do this by importing the css file and setting the component style by setting the value of className props. You should got throught the below link of React about JSX. reactjs.org/docs/introducing-jsx.html

– Varun Arya
Nov 14 '18 at 5:40

Your code is not working see this screenshot ->imgur.com/a/J2UAkty

– fun joker
Nov 14 '18 at 5:59

codesandbox.io/s/y3o187k1r9 Here's my code.

– Varun Arya
Nov 14 '18 at 6:04

|
show 4 more comments

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.

edited Nov 14 '18 at 6:32

answered Nov 14 '18 at 5:15

Varun Arya

465

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.

edited Nov 14 '18 at 6:32

answered Nov 14 '18 at 5:15

Varun Arya

465

edited Nov 14 '18 at 6:32

answered Nov 14 '18 at 5:15

Varun Arya

465

answered Nov 14 '18 at 5:15

Varun Arya

465

answered Nov 14 '18 at 5:15

Varun Arya

465

What changes do I need to make in loginForm.css ? Also why import styles if you are not using it in component ?

– fun joker
Nov 14 '18 at 5:20

You don't have to make any changes in css file. Since you want to add your own custom css style in semantic component you have to import the css file in LoginForm.js file.

– Varun Arya
Nov 14 '18 at 5:29

I guess you're confused about how to use imported css in js file. Actually react has JSX syntax which is similar to html so just like in html when you add style style to your component you set it by either "id" or "class". In react you can do this by importing the css file and setting the component style by setting the value of className props. You should got throught the below link of React about JSX. reactjs.org/docs/introducing-jsx.html

– Varun Arya
Nov 14 '18 at 5:40

Your code is not working see this screenshot ->imgur.com/a/J2UAkty

– fun joker
Nov 14 '18 at 5:59

codesandbox.io/s/y3o187k1r9 Here's my code.

– Varun Arya
Nov 14 '18 at 6:04

|
show 4 more comments

What changes do I need to make in loginForm.css ? Also why import styles if you are not using it in component ?

– fun joker
Nov 14 '18 at 5:20

You don't have to make any changes in css file. Since you want to add your own custom css style in semantic component you have to import the css file in LoginForm.js file.

– Varun Arya
Nov 14 '18 at 5:29

I guess you're confused about how to use imported css in js file. Actually react has JSX syntax which is similar to html so just like in html when you add style style to your component you set it by either "id" or "class". In react you can do this by importing the css file and setting the component style by setting the value of className props. You should got throught the below link of React about JSX. reactjs.org/docs/introducing-jsx.html

– Varun Arya
Nov 14 '18 at 5:40

Your code is not working see this screenshot ->imgur.com/a/J2UAkty

– fun joker
Nov 14 '18 at 5:59

codesandbox.io/s/y3o187k1r9 Here's my code.

– Varun Arya
Nov 14 '18 at 6:04

What changes do I need to make in loginForm.css ? Also why import styles if you are not using it in component ?

– fun joker
Nov 14 '18 at 5:20

You don't have to make any changes in css file. Since you want to add your own custom css style in semantic component you have to import the css file in LoginForm.js file.

– Varun Arya
Nov 14 '18 at 5:29

I guess you're confused about how to use imported css in js file. Actually react has JSX syntax which is similar to html so just like in html when you add style style to your component you set it by either "id" or "class". In react you can do this by importing the css file and setting the component style by setting the value of className props. You should got throught the below link of React about JSX. reactjs.org/docs/introducing-jsx.html

– Varun Arya
Nov 14 '18 at 5:40

Your code is not working see this screenshot ->imgur.com/a/J2UAkty

– fun joker
Nov 14 '18 at 5:59

codesandbox.io/s/y3o187k1r9 Here's my code.

– Varun Arya
Nov 14 '18 at 6:04

|
show 4 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky