如何为自定义ui组件，reactjs设置自定义样式

Question

这是我的登录页面模型，表单字段已获得模态的完整宽度。我想在每个输入字段周围设置10px的边距。

import React from "react";
import ReactDOM from "react-dom";
import { Button, Input, Modal } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";

function App() {
  return (
    <Modal dimmer="blurring" open={true} size={"medium"}>
      <Modal.Header>Login</Modal.Header>
      <Input fluid placeholder="Username" icon="user" />

      <Input fluid placeholder="Password" icon="key" type="password" />
      <Modal.Actions>
        <Button
          positive
          icon="checkmark"
          labelPosition="right"
          content="Submit"
        />
      </Modal.Actions>
    </Modal>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

很简单。但是我找不到文档。我只是直接将样式添加到组件中。它起作用了。

import React from "react";
import ReactDOM from "react-dom";
import { Button, Input, Modal } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";

const inlineStyle = {
    input : {
      margin: '10px',
    }
  };
function App() {
  return (
    <Modal dimmer="blurring" open={true} size={"medium"}>
      <Modal.Header>Login</Modal.Header>
      <Input fluid placeholder="Username" icon="user" style={inlineStyle.input}/>

      <Input fluid placeholder="Password" icon="key" type="password" style={inlineStyle.input}/>
      <Modal.Actions>
        <Button
          positive
          icon="checkmark"
          labelPosition="right"
          content="Submit"
        />
      </Modal.Actions>
    </Modal>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);