Why is this <div> style not working in my Component - reactjs

Question

I´m a bit new to React and cant get this marginTop to work:
const pStyle = {
marginTop: '40px'
};
nothing happens when I apply it in the div and I think I missed something please advice
import React, { Component } from "react";
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
/* Import Components */
import Input from "../components/input/Input";
import Button from "../components/button/Button";
import { actionCreators } from '../store/ContainerReducer';
const pStyle = {
marginTop: '40px'
};
class FormContainer extends Component {
constructor(props) {
super(props);
this.state = {
localBook: {
title: "",
author: "",
genre: "",
price: ""
},
};
this.handleTitle = this.handleTitle.bind(this);
this.handleAuthor = this.handleAuthor.bind(this);
this.handleGenre = this.handleGenre.bind(this);
this.handlePrice = this.handlePrice.bind(this);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.handleClearForm = this.handleClearForm.bind(this);
}
/* This lifecycle hook gets executed when the component mounts */
handleTitle(e) {
let value = e.target.value;
this.setState(
prevState => ({
localBook: {
...prevState.localBook,
title: value
}
}),
() => console.log(this.state.localBook)
);
}
handleAuthor(e) {
let value = e.target.value;
this.setState(
prevState => ({
localBook: {
...prevState.localBook,
author: value
}
}),
() => console.log(this.state.localBook)
);
}
handleGenre(e) {
let value = e.target.value;
this.setState(
prevState => ({
localBook: {
...prevState.localBook,
genre: value
}
}),
() => console.log(this.state.localBook)
);
}
handlePrice(e) {
let value = e.target.value;
this.setState(
prevState => ({
localBook: {
...prevState.localBook,
price: value
}
}),
() => console.log(this.state.localBook)
);
}
handleFormSubmit(e) {
e.preventDefault();
this.props.requestBooks(this.state.localBook);
}
handleClearForm(e) {
e.preventDefault();
this.setState({
localBook: {
title: "",
author: "",
genre: "",
price: ""
}
});
}
render() {
return (
<div class="pStyle">
<form className="container-fluid" onSubmit={this.handleFormSubmit}>
<Input
inputType={"text"}
title={"Title"}
name={"title"}
value={this.state.localBook.title}
placeholder={"Enter Title"}
handleChange={this.handleTitle}
/>{" "}
{/* Title */}
<Input
inputType={"text"}
title={"Author"}
name={"author"}
value={this.state.localBook.author}
placeholder={"Enter Author"}
handleChange={this.handleAuthor}
/>{" "}
{/* Author */}
<Input
inputType={"text"}
title={"Genre"}
name={"genre"}
value={this.state.localBook.genre}
placeholder={"Select Genre"}
handleChange={this.handleGenre}
/>{" "}
{/* Genre */}
<Input
inputType={"text"}
title={"Price"}
name={"price"}
value={this.state.localBook.price}
placeholder={"Select Price"}
handleChange={this.handlePrice}
/>{" "}
{/* Price */}
<Button
action={this.handleFormSubmit}
type={"primary"}
title={"Submit"}
style={buttonStyle}
/>{" "}
{/*Submit */}
<Button
action={this.handleClearForm}
type={"secondary"}
title={"Clear"}
style={buttonStyle}
/>{" "}
{/* Clear the form */}
</form>
</div>
);
}
}
const buttonStyle = {
margin: "10px 10px 10px 10px"
};
export default connect(
null,
dispatch => bindActionCreators(actionCreators, dispatch)
)(FormContainer);
I have this App.js
import React from 'react';
import { Route } from 'react-router';
import Layout from './components/Layout';
import Posts from './components/Posts';
import FormContainer from './components/FormContainer';
import 'typeface-roboto';
export default () => (
<Layout>
<Route exact path='/' component={FormContainer} />
<Route exact path='/' component={Posts} />
</Layout>
);
I have this Layout.js
import React from 'react';
import { Container } from 'reactstrap';
import '../../node_modules/primereact/resources/primereact.css';
import '../../node_modules/primereact/resources/themes/nova-dark/theme.css';
import NavMenu from './NavMenu';
export default props => (
<div>
<NavMenu />
<Container>
{props.children}
</Container>
</div>
);

Answer 1

you have to set your style to the div
<div style={pStyle}>
</div>

Answer 2

You should add your style not by using class keyword, but by using style keyword. And you should wrap it in curly braces, because pStyle is a JSX constant, not a string.
P.S.: Also, in React you should use className instead of class. Just FYI.
Here is how things should work in your case:
<div style={pStyle}>
<form className="container-fluid" onSubmit={this.handleFormSubmit}>
<Input
inputType={"text"}
title={"Title"}
name={"title"}
value={this.state.localBook.title}
placeholder={"Enter Title"}
handleChange={this.handleTitle}
/>{" "}
{/* Title */}
<Input
inputType={"text"}
title={"Author"}
name={"author"}
value={this.state.localBook.author}
placeholder={"Enter Author"}
handleChange={this.handleAuthor}
/>{" "}
{/* Author */}
<Input
inputType={"text"}
title={"Genre"}
name={"genre"}
value={this.state.localBook.genre}
placeholder={"Select Genre"}
handleChange={this.handleGenre}
/>{" "}
{/* Genre */}
<Input
inputType={"text"}
title={"Price"}
name={"price"}
value={this.state.localBook.price}
placeholder={"Select Price"}
handleChange={this.handlePrice}
/>{" "}
{/* Price */}
<Button
action={this.handleFormSubmit}
type={"primary"}
title={"Submit"}
style={buttonStyle}
/>{" "}
{/*Submit */}
<Button
action={this.handleClearForm}
type={"secondary"}
title={"Clear"}
style={buttonStyle}
/>{" "}
{/* Clear the form */}
</form>
</div>