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

Question

我正在使用 react-bootstrap 和样式化组件。到目前为止，一切都很完美，但现在有一个 div 和一个 className，它时不时地在变化。这个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 重新安装包
• 也对组件进行重构

有什么我遗漏的吗？如果是这样，那是什么？ 提前感谢您的帮助。

Answer 1

通过阅读此答案：Random classes getting displayed when we use styled components?

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

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

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