如何样式化反应语义组件？

Question

如何为反应语义 UI 添加 CSS？我正在使用创建反应应用程序。我已经安装了 semantic-ui-react 和 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;
}

以上 CSS 代码不适用于 loginForm.js 为什么会这样？我还尝试了以下操作：

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

上面的代码也不行。

Answer 1

实际上，您错误地设置了 className 的值。 这是您的代码的修改版本。

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;

对于 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;
}

感谢 @funJoker 建议我如何编辑语义 UI 样式。