将 html bootstrap 转换为 react.js jsx 样式后更改 css 样式
Posted
技术标签:
【中文标题】将 html bootstrap 转换为 react.js jsx 样式后更改 css 样式【英文标题】：Changing css styles after translating html bootstrap into react.js jsx style 【发布时间】：2019-05-08 12:24:04 【问题描述】：我有一个简单的结构化项目：html（带有 Bootstrap）css 和 js 文件。 我已经创建了 React.js 项目（通过 npm 中的 create-react-app）。我已经安装了 Bootstrap、JQuery 等。问题是当我将我的 html 文件翻译成 jsx 时，React 似乎忽略了样式（我在 React 中照常应用）。它忽略了网格。我有 3 行，其中一个左侧有一个元素，每行有两行，每行有 3 个元素（col-sm-4 col-md-4 col-lg4）。在我的旧项目（纯 html、css、js）中，它工作正常，但在这个 React 项目中，它的行为就像......它会在移动版本中（每一行中的一个元素低于另一个元素）。同时使用开发工具，我看到这些行和列仍然存在于浏览器代码中，但样式为空......你能告诉我发生了什么吗？我应该在哪里搜索这个问题的原因？
【问题讨论】：
【参考方案1】：如果您只是使用标准 React，则需要在 public/index.html 内的 <head></head> 标记中包含以下内容：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
如果您使用的是 Webpack 等构建器，请在您的 src/index.js 中运行 npm install bootstrap 和 include 依赖项。
假设所有这些都正确完成，设置 react 组件样式的正确方法如下：
直接给标签加样式：
<div style=margin: '10px'>This is a div!</div>
使用 Bootstrap 类进行样式设置：
<button className="btn btn-primary">Click me!<button>
有用的链接：
https://getbootstrap.com/docs/4.1/getting-started/introduction/
https://blog.logrocket.com/how-to-use-bootstrap-with-react-a354715d1121
【讨论】：
我爱你！我忘记了在 src/index.js 中包含对导入的依赖项。非常非常感谢！以上是关于将 html bootstrap 转换为 react.js jsx 样式后更改 css 样式的主要内容，如果未能解决你的问题，请参考以下文章
html 创建Bootstrap datepicker并使用Moment将时间格式从C＃转换为JS可读
如何将 Bootstrap 中的按钮组转换为表单的单选式输入？
html 使用Bootstrap 3将文件输入转换为形状（http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-boot