Я пытаюсь изменить глобальное семейство шрифтов для своего приложения, но не могу заставить его работать.
Я использую Semantic-UI-React, поэтому я подумал, что это может быть проблемой, но когда я искал src/site/globals/site.variables (что-то, на что ссылались другие решения) для изменения глобальных переменных, я понял, что неЭти файлы не должны находиться внутри модуля узла Semantic-UI-React.Я также пытался использовать !important в #root моего приложения, а также .app, который охватывает все мои компоненты и другие более низкие уровни, но это только меняет код внутри моего семантического модального.
Я импортировал шрифты в frontend_react/public/index.html
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="/styles.css" >
<link href="https://fonts.googleapis.com/css?family=Cinzel:700,900" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css?family=Cinzel:700,900');
#root {
font-family: 'Cinzel', serif !important;
}
</style>
<title>Three Seeds Tarot</title>
Затем я вызвал шрифт в /App.css.Я также вызвал его с помощью селектора body, html таким же образом и с селектором page, но безрезультатно.
.App {
text-align: center;
background-image: url('http://2.bp.blogspot.com/-kX_5_Cqch4g/UmBAsMV4krI/AAAAAAAADjA/XEJnfAq1Dsg/s1600/ProtectionKamea300dpi(a3).jpg');
font-family: 'Cinzel', serif !important;
}
, и вот моя /App.js функция рендеринга компонентов:
render() {
const user = this.props.user
return (
<div className='App'>
<div id='nav-bar'>
<NavBar/>
</div>
<div className='page'>
{!user.loggedIn ? <div>
<header className='App-header'>
<marquee scrollamount='5' direction='right'><img src={image} className='App-logo' alt='logo' /></marquee>
</header>
</div> : null
}
<Switch>
<Route path='/readings/new' component={ NewReading } />
<Route path='/readings' component={ ReadingSplash } />
<Route path='/cards' component={ CardList }/>
<Route exact path='/profile' component={ Profile } />
<Route exact path='/' component={ Welcome } />
<Route exact path='/login' component={ Login } />
<Route exact path='/signup' component={ Signup } />
</Switch>
</div>
</div>
);
}
Единственное место, где сработали изменения CSS, - это теги <p> внутри моего Semantic UI Modal:
render() {
return (
<div className='card-image'>
<Modal
size='large'
trigger={
<div className="ui medium images" >
<img className="single-card" src={this.getImage(this.props.card.name)} alt="No Image Found" onClick={this.handleClick} />
</div>}
style={inlineStyle.modal}
>
<Modal.Header>{this.props.card.name}</Modal.Header>
<Modal.Content >
<Image wrapped size='medium' src={this.getImage(this.props.card.name)} floated='left' />
<Modal.Description>
<Header>{capitalize(this.props.card.card_type)} Arcana</Header>
<p>Meaning Upright: {this.props.card.meaning_up} </p>
<p>Meaning Reversed: {this.props.card.meaning_rev} </p>
<p>Description: {this.props.card.desc} </p>
</Modal.Description>
</Modal.Content>
<Modal.Actions>
{/* <Button primary onClick={this.modalClose}>Close</Button> */}
</Modal.Actions>
</Modal>
</div>
)
}
Итак, в заключение я хочу изменить глобальный шрифт.Я попытался использовать !important, который, как я знаю, не является лучшим решением, но все другие решения, которые я обнаружил, имеют ссылки на изменение глобальных переменных для Semantic UI React в папке src/site/globals/site.variables, что мне не кажетсяесть.