CSS Реагировать на компоненты

Question

Я начал переписывать CSS в React Components, но я столкнулся с проблемой, я знаю, как это сделать (используя, например, styled-components):

Answer 1

У вас есть 5 способов стилизации компонента в React.

У каждого подхода есть свои плюсы и минусы (лично я использую 4-й способ.)

1.Inline Css

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;

2. CSS in JS

const Button = (props) => (
  <button className={ 'large' in props && 'large' }>
     { props.children }
     <style jsx>{`
        button {
          padding: 20px;
          background: #eee;
          color: #999
        }
        .large {
          padding: 50px
        }
     `}</style>
  </button>
)

/* Creates a regular button */
<Button>Hi</Button>

/* Creates a large button */
<Button large>Big</Button>

3. Стилизованные компоненты

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;


render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

4. Css Модули (s css || sass)

@width: 10px;
@height: @width + 10px;
#header {
  width: @width;
  height: @height;
}

5. Stylable - https://github.com/wix/stylable

Answer 2

import React from 'react';
import styled, {css} from 'styled-components';

const Info = styled.div`
display: flex;
// etc.
${props => props.title && css`font-size: 15px`}
`
const Box = styled.div`
&:first-of-type {
// some more css 
}
`
// usage
<Info title>some info</Info>

Я рекомендую вам следовать официальным документам , как указано в комментариях @Mikkel