Как изменить стили компонентов react-bootstrap без использования className, style={{}}?

Question

[Cyberial Syntwaiser]

Доброго времени товарищи :)
Начал использовать react-bootstrap, т.к уж очень удобно копи пастить куски кода, которые сам бы вводил по долгу времени, но вот беда, как стилизовать нужные мне блоки без использования className, style={{}}, а только по средством styled-components или любой другой аналог? Допустим мне нужно поменять padding и изменить другие стили для этой кнопки, кто подскажет как это сделать?
style={{}} писать компоненту не хочу, т.к читал что это ухудшает скорость сайта, или что-то в этом роде, а давать className, к которому писать отдельно стили ради того чтоб внести нужные изменения, это тоже самое что с костылем ходить :)
Спасибо за помощь и всего наилучшего :)

import { Button} from 'react-bootstrap';
              <Button variant="primary" type="submit">
                    Submit
                </Button>

Answer 1

[Nikolay Matyushkin]

import { Button} from 'react-bootstrap';
import React from "react";
import styled from "styled-components";

export const ButtonComponent = (props) => {
    return (
        <CustomButton variant="primary" type="submit">
            Submit
        </CustomButton>
    )
};

const CustomButton = styled(Button)`
    // Стили, которые хотим переназначить
`;

Пример использования кнопки Button от react-bootstrap в функциональной компоненте. Думаю понятно.

Comments

[Cyberial Syntwaiser]

Не всё стало так гладко, т.к не срабатывает функция styled(Button);
Вот лог ошибки *Form.js:70 Uncaught TypeError: styled_components__WEBPACK_IMPORTED_MODULE_1__.default.Button is not a function*

[Cyberial Syntwaiser]

Cyberial Syntwaiser, Нашел решение для этого всего, чтобы импортировать стили для react-bootstrap, нужно использовать react as={BootstrapSomeComponent} к примеру

import { Container, Form, Col, Button} from 'react-bootstrap';
const ButtonComponent = () => {
    return (
  <ButtonBootstrap as={Button} variant="primary" type="submit">
             Submit
       </ButtonBootstrap>
)
}

const ButtonBootstrap = styled.button `
    margin: 50px 0;
`