te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Why custom css class does not work on React-Semantic-UI elements? - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Why custom css class does not work on React-Semantic-UI elements? - Stack Overflow

    javascript - Why custom css class does not work on React-Semantic-UI elements? - Stack Overflow

    programmeradmin3浏览0评论

    I created card with react-semantic-ui, I want to add some extra styles via css class.

    One example is:

    I add custom 'card' class with box-shadow property, and that style is not applied.

              HTML PART:

import './App.css';


          {/* CLAIM CARDS SECTION */}

                  <Card className='card'>
                    <Card.Content>
                      <Card.Header style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>       
                        <h4>
                          Church Mutual Worker's Compensation Claim 
                          <span style={{marginLeft: '130px'}}>Claim #1234567</span>
                        </h4>
                      </Card.Header>
                    </Card.Content>
                  </Card>

    CSS PART OF CODE: App.css

     .header-height {
      height: 12rem;
    }

    .header-title-color {
      color: black;
      font-weight: bold;
    }

    .card {
      box-shadow: 2px 2px 2px 2px grey;
      width: 100%;
    }

    .red {
      color: red;
    }

    Does someone have solution how to add custom css class to the React-semantic-ui ponents?

    Thanks

    I created card with react-semantic-ui, I want to add some extra styles via css class.

    One example is:

    I add custom 'card' class with box-shadow property, and that style is not applied.

              HTML PART:

import './App.css';


          {/* CLAIM CARDS SECTION */}

                  <Card className='card'>
                    <Card.Content>
                      <Card.Header style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>       
                        <h4>
                          Church Mutual Worker's Compensation Claim 
                          <span style={{marginLeft: '130px'}}>Claim #1234567</span>
                        </h4>
                      </Card.Header>
                    </Card.Content>
                  </Card>

    CSS PART OF CODE: App.css

     .header-height {
      height: 12rem;
    }

    .header-title-color {
      color: black;
      font-weight: bold;
    }

    .card {
      box-shadow: 2px 2px 2px 2px grey;
      width: 100%;
    }

    .red {
      color: red;
    }

    Does someone have solution how to add custom css class to the React-semantic-ui ponents?

    Thanks

    • javascript
    • css
    • reactjs
    • semantic-ui
    • semantic-ui-react
    Share Improve this question edited Sep 16, 2018 at 17:23 Lazar Nikolic 4,3941 gold badge26 silver badges46 bronze badges asked Sep 15, 2018 at 14:39 James DelaneyJames Delaney 1,7762 gold badges21 silver badges38 bronze badges
    Add a ment  | 

    2 Answers 2

    Reset to default 11

    Give your className a bit more specific name, like claim_Card. After that in your css you need to override sematic's default css by adding your className to existing semantic's css for that ponent. In your case it would be something like 

    .ui.card.claim_Card {
  background: #455332; //for example
}

    This will give your css rule more specificity and will override default semantic css. Anyway, check in your browser inspector what css class is applied to your element that you want to style and use that className (in this case .ui.card) and add on it your className definition and rules.

    Since class is a keyword in JavaScript, you should use className instead of class in React.

    <Card className='card'>

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论