Есть ли способ переопределить стиль из Semantic-UI со стилем из Styled-Components в ReactJS?

Question

Я строю небольшой проект в 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>

У кого-нибудь из вас есть идея, если это возможно, и если да, то, есть ли правильный способ сделать это?

Answer 1

Пример с настраиваемым компонентом статистики семантического интерфейса пользователя:

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