Как установить пользовательский стиль для компонентов пользовательского интерфейса, реагировать - PullRequest
Новая
       11

Как установить пользовательский стиль для компонентов пользовательского интерфейса, реагировать

0 голосов
/ 08 апреля 2019

Вот моя модель для страницы входа, поля формы получили полную ширину модального поля. Я хочу установить поле 10px вокруг каждого поля ввода.

enter image description here

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);

1 Ответ

0 голосов
/ 08 апреля 2019

Это прямо вперед.Но я не смог найти документацию.Я просто добавил стили непосредственно к компоненту.это сработало. 

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);
...