emotion的使用(css-in-js)

import {
      css } from 'emotion';

首先引入

let customStyle = css`
      & .ant-table-tbody {
        font-size: ${
       tableFontSize};
        color: ${
       tableFontColor} !important;
      }

      &:hover .table-row > td {
        background: none;
      }
      .ant-table-tbody
        > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
        > td
        > div {
        background: ${
       table_hover_background} !important;
        color: ${
       table_hover_color} !important;
        font-size: ${
       table_hover_fontSize};
      }
    `;

此步操作是再js里面更改css,将原css替换
emotion的使用(css-in-js)_第1张图片
此步操作时重新再组件内部新增class
emotion的使用(css-in-js)_第2张图片
最后

你可能感兴趣的:(react,reactjs)