Как настроить React JumboTron, заголовок и абзац - PullRequest
Новая
       73

Как настроить React JumboTron, заголовок и абзац

0 голосов
/ 28 мая 2020

Я использую response- bootstrap и пытаюсь интегрировать JumboTron. Общая концепция работает нормально, но я не могу настроить стиль, чтобы он выглядел так, как я хочу.

вот код, который я использую: 

import React from 'react';
import {Jumbotron, Button} from 'react-bootstrap';
import '../../assets/styles/HomeTheme.css';
import '../../assets/styles/GenericTheme.css'

function HomeCuratedSection() {

    return(
        <Jumbotron className="home-container">
            <h1>Curated learning experiences near you</h1>
            <p>
            here us the desc
            </p>
            <p>
                <Button href="/hereisthemission" className="button-blue">Here's the Mission</Button>
            </p>
        </Jumbotron>
    )

}

export default HomeCuratedSection

На Button я добавил className=button-blue, и его определение в css ниже:

GenericTheme. css

.button-blue {
    border-radius: 21.5px;
    box-shadow: 0px 8px 18px 0 var(--black-14);
    background-color: #14cff0;
    font-family: SourceSansPro;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: red;
  }

похоже, совсем не работает изменение стиля кнопок, а также шрифта.

Также я хотел бы изменить шрифт и размер шрифта для h1 и p.

Есть идеи, как заставить стиль кнопки работать, а также изменить части h1 и p?

Я попытался сначала просто изменить цвет шрифта и фона, но это не работает.

Спасибо за помощь

...