Question

如何添加CSS来响应语义UI？我正在使用create react应用。我已经安装了语义UI反应和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样式。

如何设置样式以响应语义成分？

1 个答案: