How to set custom style to sementic ui components, reactjs - css

Question

Here is my model for login page, the form fields have gained the full width of the modal. I want to set a margin of 10px around each input field.
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

It is straight forward. But I couldn't find the documentation. I simply added styles directly to the component. it worked.
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);