Сгенерированные имена классов стилизованных компонентов портят мой макет с React- Bootstrap - PullRequest
Новая
       22

Сгенерированные имена классов стилизованных компонентов портят мой макет с React- Bootstrap

1 голос
/ 17 июня 2020

Я использую response- 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;

ChromeTools

Что я пробовал до сих пор:

  • Удален ThemeProvider
  • Поместите маршруты прямо в индекс. js (Могу я сделать это, или это плохая практика?)
  • Переустановил пакеты через NPM
  • Рефакторинг компонентов также

Что-то мне не хватает, и если это так, то что? Заранее благодарим за помощь.

1 Ответ

1 голос
/ 18 июня 2020

Из прочтения этого ответа: Отображаются случайные классы, когда мы используем стилизованные компоненты?

Похоже, ваш <ThemeProvider theme={theme}> на самом деле не получает правильную «тему».

Похоже, что вы получаете свой Ha sh на элемент, как объяснено в приведенном выше ответе стека, но на самом деле вы не получаете свои стили из темы.

Итак, я предполагаю, что это где вы ошибаетесь. Проверьте компонент "Тема".

...