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

【问题标题】：How to pass padding/margin as props in React-Bootstrap components如何在 React-Bootstrap 组件中将填充/边距作为道具传递
【发布时间】：2019-06-17 22:16:06
【问题描述】：

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

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

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

填充和边距用作类名。但我觉得必须有一种方法可以不使用 Bootstrap 类。一定有一种属性。

【问题讨论】：

开发人员到现在还没有在 react-bootstrap 上添加间距功能，我更喜欢为此使用 bootstrap 4 org 库
你搞清楚了吗？
@Sam 不，我只是将引导程序用作没有 react-boorstrap 的类
@AlexNikonov 是不可能的，还是你从来没想过
@Sam 我试图找到一种方法但放弃了，但是已经过去了一年多，所以可能会更新一些文档或者可能会添加这个恐惧，但我现在不确定

标签： reactjs twitter-bootstrap-3 bootstrap-4 react-bootstrap

【解决方案1】：

首先在您的src/index.js 或App.js 中包含引导CSS

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

然后您可以通过在 React 中将所需的引导 CSS 类名称作为 className 属性传递给您的组件，例如：

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

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

export default MyComponent

以上代码会将p-0 CSS 类添加到Container。

参考

React - How do I add CSS classes to components?

React-Bootstrap - Stylesheets

【讨论】：

【解决方案2】：

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

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

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

引用自here

【讨论】：

是的，我就是这样做的，因为我添加了默认引导 className='pb-5'，我的问题是如何在 react-bootstrap 中做到这一点
这取决于 lib 本身。开发者可能还没有添加这种功能。

【解决方案3】：

答案是：React Bootstrap 没有使用边距/填充的道具。

col 类可以使用 props，但边距不能使用。

例子：

<Col className="col-6 col-md-3 mb-3 pt-2">
// there you have a Col component from React-Bootstrap 4
// it has some grid system classes, that you can use as props like this:

https://react-bootstrap.github.io/layout/grid/

<Col xs={6} md={3} className="mb-3 pt-2">
// but as you can see, the native classes of Bootstrap 4 like
// mt, mb, pt, pb etc, they have not a props use with
// React-Bootstrap, you have to use them like regular classes
// inside "className"

【讨论】：

【解决方案4】：

您需要将 className="p-5" 添加到元素中。这在 react-bootstrap 中没有记录，但它在原始 Bootstrap 4 文档中：https://getbootstrap.com/docs/4.4/utilities/spacing/#examples

【讨论】：

【解决方案5】：

通常，我可以将自定义样式添加到 React Bootstrap 组件，只需将它们添加到样式参数即可。我在下面整理了一个简短的示例，希望对您有所帮助。

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

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

const ReactButton = (props) => {
    return (
        <Button style={styles.myCoolButton} onClick={()=> {
            console.log("Do something here!")
        }}>Click Me!</Button>
    );
}

export default ReactButton

如果您更喜欢这样做，您还可以传递自定义组件（包括来自 react-bootstrap 的组件）into the styled-components constructor。

【讨论】：

【解决方案6】：

Bootstrap 的无 jQuery 实现（React Bootstrap、BootstrapVue 或 ngBootstrap）都没有实现用于间距的实用程序指令（margin/padding），仅仅是因为 Bootstrap 在绝大多数情况下都不需要它，通过提供一组非常直观的Spacing utility classes。

您需要做的就是应用所需的类。

要根据响应间隔（媒体查询）有选择地应用实用程序类，您可以使用 useMedia 挂钩 as demoed here。
简而言之：

const interval = useMedia([
    "(min-width: 1200px)",
    "(min-width: 992px)",
    "(min-width: 768px)",
    "(min-width: 576px)"
  ],
  ["xl", "lg", "md", "sm"],
  "xs"
);

（基于来自useHooks/useMedia 的useMedia）。

您现在可以在整个应用程序中重复使用此挂钩来添加基于媒体间隔的逻辑。

示例用法：

// interval === 'sm' ? a : b
// ['xs', 'sm'].includes(interval) ? a : b
// negations of the above, etc...

重要提示：此特定实现返回列表中第一个匹配的媒体查询。

如果您需要将各种媒体查询映射到具有true/false 值的对象/映射，则需要修改getValue fn 以返回整个列表，如下所示：

const getValue = () => {
  const matches =  mediaQueryLists.map(mql => mql.matches);
  return values.reduce((o, k, i) => ({...o, [k]: matches[i]}), {})
};

工作示例here.
显然，您可以扩展它并添加/删除查询。但是，请注意，每个查询都会添加一个单独的侦听器，因此可能会影响性能。

在大多数情况下，返回第一个匹配查询（第一个示例）就足够了。

注意：如果上述 useMedia 钩子不足以满足您的用例，则为 JS 中的媒体查询侦听器提供更强大且经过大量测试的解决方案是 enquire.js。它易于使用、非常轻巧且经过全面测试的跨浏览器/跨设备。我与它没有任何关系，但在十多年的时间里，我在各种项目中使用过它。简而言之，我不能再推荐它了。

回到 Bootstrap 4：为了自定义 $spacer 大小，请遵循 Bootstrap 的 theming 下提供的指南，因为它实际上不仅仅是我们通常所说的主题（改变颜色），它是关于覆盖 Bootstrap 的 SASS 的默认值默认值，包括响应断点、分隔符、列数等等。您感兴趣的是$spacer。
只需将覆盖写入.scss 文件并将其导入您的根组件。 Example.

注意：自定义 Bootstrap 的一个（更简单和更直观）选项是使用 bootstrap.build 直观地完成它，但它通常落后一些小版本（即 Bootstrap 现在位于 v4.4.1构建工具位于v4.3.0)。
构建定制器提供直观的控件和实时可视化。
它允许导出为.css 或.scss。

【讨论】：

【解决方案7】：

只需根据您的输入尝试一次，如果遇到任何问题，您仍然可以联系。在下面我们增加了 .col 填充与 .px-md-5 然后在父 .row 上使用 .mx-md-n5 进行反击。

JSX：

import React from 'react'
import { MDBContainer, MDBRow, MDBCol } from 'mdbreact';

const SpacingPage = () => {
  return (
    <MDBContainer>
      <MDBRow className="mx-md-n5">
        <MDBCol size="6" className="py-3 px-md-5">Custom column padding</MDBCol>
        <MDBCol size="6" className="py-3 px-md-5">Custom column padding</MDBCol>
      </MDBRow>
    </MDBContainer>
  )
}

export default SpacingPage;

如果您对此仍有任何疑问，请随时提问。

【讨论】：