javascript - 样式化的组件生成的类名用 React-Bootstrap 弄乱了我的布局

问题描述

我正在使用 react-bootstrap 和样式化的组件。到目前为止，一切都很完美，但现在有一个div不时className变化的 a。这div有一个高度，450px它在我的主布局之上，限制了其他所有东西的高度。

我在组件上使用的语法类似于：

import styled from 'styled-components'

const Styles = styled.div`
  .input-group-prepend {
    padding-top:11px;
    padding-right:10px;
  }

  .login-input {
    background-color: #6C63FF;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding: 0;
    width: 240px;
    color:white;
    font-size:0.80rem;
  }

export const Input = (props) => {
  const { type, placeholder, } = props
  return (
    <Styles>
      <InputGroup className="my-4">
        <InputGroup.Prepend>
            {props.children}
        </InputGroup.Prepend>
        <FormControl
          className='login-input'
          placeholder={placeholder}
          aria-label={placeholder}
        />
      </InputGroup>
    </Styles>
  )
}

我的应用组件

import React, { Component } from 'react'
import Routes from './Routes'

import { ThemeProvider } from 'styled-components'
import { theme } from './theme'

class App extends Component {
    render() {
        return (
            <ThemeProvider theme={theme}>
                <Routes />
            </ThemeProvider>
        )
    }
}

export default App;

到目前为止我已经尝试过：

删除了 ThemeProvider
将路由直接放入 index.js（我可以这样做还是不好的做法？）
通过 NPM 重新安装包
对组件也进行重构

有什么我想念的吗？如果是这样，那是什么？在此先感谢您的帮助。

标签： javascriptreactjsreact-bootstrapstyled-components

通过阅读此答案：当我们使用样式化组件时会显示随机类？

看起来您<ThemeProvider theme={theme}>实际上没有收到正确的“主题”。

看起来像上面的堆栈答案中所解释的那样，您正在将哈希接收到元素上，但实际上您并没有从主题中接收到您的样式。

所以我认为这就是你出错的地方。检查您的主题组件。

javascript - 样式化的组件生成的类名用 React-Bootstrap 弄乱了我的布局

问题描述

解决方案

推荐阅读