有没有办法用 ReactJS 中 Styled-Components 的样式覆盖 Semantic-UI 的样式？答案

【问题标题】：Is there a way to override style from Semantic-UI with style from Styled-Components in ReactJS?有没有办法用 ReactJS 中 Styled-Components 的样式覆盖 Semantic-UI 的样式？
【发布时间】：2020-02-22 16:53:25
【问题描述】：

我正在用 ReactJS 构建一个小项目，我想使用 Semantic-UI（作为我网站的主题）并用 Styled Components 覆盖它的某些部分（就像它是一些自定义 CSS）。

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

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

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>

你们有没有一个想法，如果可能的话，有没有合适的方法来做到这一点？

【问题讨论】：

您能展示一下您是如何尝试的吗？
问题已用我的文件更新，如果您需要更多信息，请告诉我。
您的StyledRegister 组件看起来如何？我会给你一个例子，我通常是怎么做的。

标签： reactjs redux semantic-ui styled-components semantic-ui-react

【解决方案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

【讨论】：