如何在 React-Bootstrap 中创建更小的“输入”

2020-05-11 08:00:00 · 飞浪

介绍样式是任何Web或移动应用的一个关键方面。您不能总是使用Bootstrap或任何其他库提供的默认样式，但您希望在不同的屏幕上拥有一致且灵活的设计。幸运的是，您可以使用自定义CSS覆

介绍

样式是任何 Web 或移动应用的一个关键方面。您不能总是使用 Bootstrap 或任何其他库提供的默认样式，但您希望在不同的屏幕上拥有一致且灵活的设计。幸运的是，您可以使用自定义 CSS 覆盖 Bootstrap 的默认样式。Bootstrap 还具有其他实用程序类，您可以使用它们来更改外观。

您可能想要进行的一项样式更改是减小输入的大小，以与客户的样式指南或设计团队的组件设计相匹配。在本指南中，您将学习如何减小 React-Bootstrap 中输入的大小。

使用 Props 减小尺寸

React Bootstrap 是 Bootstrap 库的 React 实现。React Bootstrap 具有可使用 props 自定义的组件。

要减小输入的大小，您可以使用Form.Control组件的size属性。

首先，从react-bootstrap导入Form组件。

      import React from "react";
import { Container, Form } from "react-bootstrap";

const App = () => {
  return (
    <Container>
      <Form.Control size="sm" name="foo" placeholder="Smaller Input" />
    </Container>
  );
};

export default App;
    

size ="sm"属性将减小表单输入字段的大小。size 属性的另一个可能值是lg，这将增加字段的大小。

使用自定义 CSS

传统的样式设置方式是使用 CSS 类。您可以在Form组件的className属性中指定其他 CSS 类。

      import React from "react";
import { Container, Form } from "react-bootstrap";

const App = () => {
  return (
    <Container>
      <Form.Control
        className="smaller-input"
        name="foo"
        placeholder="Smaller Input"
      />
    </Container>
  );
};
    

现在，在您的 CSS 文件中添加.smaller-input样式规则。

      .smaller-input {
  font-size: 12px;
  padding: 2px 5px;
}
    

您还可以使用 style属性指定内联样式。样式采用样式规则对象。对象中的每个键都是 CSS 属性的驼峰式版本。

      import React from "react";
import { Container, Form } from "react-bootstrap";

const App = () => {
  return (
    <Container>
      <Form.Control
        style={{ fontSize: 12, padding: 3 }}
        name="foo"
        placeholder="Smaller Input"
      />
    </Container>
  );
};
    

使用样式化组件

对于某些开发人员来说，编写驼峰式 CSS 属性可能会有点不舒服。通常，开发人员习惯于以传统方式编写 CSS。这就是styled-components发挥作用的地方。

样式化组件允许您编写实际的 CSS 代码来设置组件的样式。它们利用标记模板文字将 CSS 样式映射到组件。

通过运行以下 npm 命令安装样式组件。

      npm install --save styled-components

要创建样式化组件，您需要在styled()方法中传递 React 组件。在标记的文字字符串中，您可以编写 CSS 样式规则，而无需使用驼峰式大小写来表示属性名称。

      import styled from "styled-components";
import { Container, Form } from "react-bootstrap";

const StyledInput = styled(Form.Control)`
  font-size: 12px;
  padding: 2px 5px;
`;
    

现在您可以使用此StyledInput组件来呈现输入字段。

      import React from "react";
import styled from "styled-components";
import { Container, Form } from "react-bootstrap";

const StyledInput = styled(Form.Control)`
  font-size: 12px;
  padding: 2px 5px;
`;

const App = () => {
  return (
    <Container>
      <StyledInput name="foo" placeholder="Smaller Input" />
    </Container>
  );
};
    

只要将className prop 附加到 DOM 元素，styled ()方法就能对任何组件正常工作。

结论

在本指南中，您学习了多种使 React Bootstrap 输入变小的方法。作为开发人员，了解处理或解决特定问题的不同方法会很有帮助。这在解决问题时非常有用 - 如果当前解决方案失败，您总会有其他解决方案可供选择。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 React-Bootstrap 中创建更小的“输入”

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from "react"; import { Container, Form } from "react-bootstrap"; const App = () => { return ( <Container> <Form.Control size="sm" name="foo" placeholder="Smaller Input" /> </Container> ); }; export default App;

import React from "react"; import { Container, Form } from "react-bootstrap"; const App = () => { return ( <Container> <Form.Control className="smaller-input" name="foo" placeholder="Smaller Input" /> </Container> ); };

import React from "react"; import { Container, Form } from "react-bootstrap"; const App = () => { return ( <Container> <Form.Control style={{ fontSize: 12, padding: 3 }} name="foo" placeholder="Smaller Input" /> </Container> ); };

import React from "react"; import styled from "styled-components"; import { Container, Form } from "react-bootstrap"; const StyledInput = styled(Form.Control)` font-size: 12px; padding: 2px 5px; `; const App = () => { return ( <Container> <StyledInput name="foo" placeholder="Smaller Input" /> </Container> ); };