如何在 React-Bootstrap 组件中将填充/边距作为道具传递

Question

我正在尝试使用 React-Bootstrap 作为道具应用边距和填充。

我通过了文档，但没有发现任何提及在那里添加填充或边距，因为它在官方引导程序文档（第 3和第 4 个）中。我知道它不能很好地支持 Bootstrap 4，所以尝试了两者。

我试图将 params 传递为p={1}，paddingxs={5}或者mt='1'但它无法识别其中任何一个。更多的尝试在 React-Bootstrap 文件夹中找到任何Spacing元素，但失败了。

填充和边距用作类名。但是我觉得没有 Bootstrap 类就一定有办法。一定有一种财产。

Answer 1

首先在您的src/index.js或App.js

import 'bootstrap/dist/css/bootstrap.min.css';

然后你可以通过className在 React 中传递所需的引导 CSS 类名作为prop来设置你的组件的样式，例如：

import React from "react"
import Container from "react-bootstrap/Container";

function MyComponent() {
  return (
    <Container fluid className="p-0">
      <SomeOtherComponent />
    </Container>
  );
}

export default MyComponent

上面的代码会将p-0CSS 类添加到Container.

参考

React - 如何向组件添加 CSS 类？

React-Bootstrap - 样式表

Answer 2

您可以使用默认的 React 样式添加边距和填充：

const divStyle = {
  marginLeft: '10px',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

从这里引用