是否有一种方法可以使用ReactJS中的样式化组件中的样式覆盖Semantic-UI中的样式？

Question

我正在ReactJS中构建一个小项目，我想使用Semantic-UI（作为我网站的主要主题），并使用样式化组件覆盖其中的某些部分（例如，它是一些自定义CSS）。

[当我尝试将它们导入同一组件时，我注意到样式化组件将使用我编写的某些样式，但不会全部使用（例如，文本大小或某些边距）。

编辑这是我尝试在组件中实现它们的方式：

import "semantic-ui-css/semantic.min.css";
import { Grid, Form, Segment, Button, Header, Message, Icon } from 'semantic-ui-react';
import { StyledRegister } from '../styles/StyledRegister';

class Register extends React.Component {

...

render() {    
 return (
   <StyledRegister>
     <Grid textAlign="center" verticalAlign="middle">
       <Grid.Column style={{ maxWidth: 450 }}>
         // Here's continue the long code of my register page including form ect...
       </Grid.Column>
      </Grid>
    </StyledRegister>

你们中的任何人是否有想法，如果有，是否有适当的方法来做？

Answer 1

带有语义ui的定制适应统计信息组件的示例：

import "semantic-ui-css/semantic.min.css";
import { StyledStatistic } from "./styledStatistic";

function App() {
  return (
    <div className="App">
      <StyledStatistic>
        <StyledStatistic.Value>5,550</StyledStatistic.Value>
        <StyledStatistic.Label>Downloads</StyledStatistic.Label>
      </StyledStatistic>
    </div>
  );
}

import styled from "styled-components";
import { Statistic } from "semantic-ui-react";

export const StyledStatistic = styled(Statistic)`
  padding: 2rem;
  display: flex !important;
  justify-content: center;

  &&& > .value {
    color: red;
  }
  &&& > .label {
    color: green;
  }
`;

参见：https://codesandbox.io/s/goofy-mestorf-go410