How to pass padding/margin as props in React-Bootstrap components

Question

I am trying to apply margins and paddings with React-Bootstrap as props.

I passed the docs through but haven\'t found any mention adding padding or margin in there as it

Answer 1

Usually, I'm able to add custom styles to React Bootstrap components by just adding them to the style param. I've put together a short example below, hope this helps.

import React from 'react';
import { Button } from 'react-bootstrap';

const styles = {
    myCoolButton: {
        paddingTop: "10vh",
        paddingBottom: "10vh",
        paddingRight: "10vw",
        paddingLeft: "10vw"
    }
}

const ReactButton = (props) => {
    return (
         {
            console.log("Do something here!")
        }}>Click Me!
    );
}

export default ReactButton

You can also pass custom components (including those from react-bootstrap) into the styled-components constructor if you prefer to do it that way.