css - 自定义语义 UI React 字体系列，但找不到 src/site/globals/site.variables 文件来执行此操作。还有别的办法吗？

Question

我正在尝试更改我的应用程序的全局字体系列，但我无法让它工作。

我正在使用 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>我的语义 UI 模式中的标签:

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我知道这不是最好的解决方案，但我发现的所有其他解决方案都引用了在 src/site/globals/site.variables 中更改语义 UI React 的全局变量。文件夹，我好像没有。

Answer 1

site.variables 文件是 CSS 的语义 UI 构建工具中的一个单独文件。如果您的元素不包括包含所有 Gulp 构建工具的主要语义 UI 元素，那么您将没有任何这些文件。更改该字体的唯一方法是重新编译您自己的 CSS。

听起来您正在导入语义 UI 样式，这些样式已在应用程序早期的某个地方编译为 CSS 导入。只要您在 SUI 导入 CSS 之后在 body 标签上定义了您想要的字体，它就应该优先。如果您想确定，您还可以组合选择器以提高特异性。

body #root {
  font-family: "MyFont", ...your fallback stack 
}