В React не работает гибкий стиль компонента

Question

Я пытаюсь работать с styled-компонентами. Однако сейчас я использую «flex» для адаптивного дизайна, но я не могу понять это.

CSS стилевых компонентов не работает. Я не вижу эти стили на моем веб-сайте

Ниже приведена схема моего стиля

import TagsInput from 'react-tagsinput';
import PostTypeSelector from './PostTypeSelector';
import styled from 'styled-components';
import PostMarkdown from './PostMarkdown';
import PostSubmit from './PostSubmit';
// const StyledPostSubmit = styled(PostSubmit)`
// `;
// const StyledTagsInput = styled(TagsInput)`
// `;
const StyledPostTypeSelector = styled(PostTypeSelector)`
    background-color: gray;
     flex: 1 0;
`;
const StyledPostForm = styled(PostForm)`
    flex: 9 0;
`;
const StyledPostMarkdown = styled(PostMarkdown)`
    flex: 10 0;
    border-left: 1px solid #222222;
`;

, и я настраиваюсь так:

render() {
  return (
    <div className="posting">
    <div className="plain-post-form-0">
    <div className="plain-post-form-1">
      <div style={{
        display: 'flex',
        flexDirection:'row',
        width: '800px'
        }}
        className="plain-post-form-2"
      >
      <StyledPostForm
        onSave={this.handleSave}
        post={this.initValue()}
       />
        <StyledPostTypeSelector
       />
        <StyledPostMarkdown
           post={this.state}
        />
      </div>
      <TagsInput
       value={this.state.tags}
       onChange={this.handleTagsChange}
      />
      <PostSubmit
          data={this.handleCommit}
          target={post}
          method="post"
          value="Commit"
      />
      </div>
  </div>
  </div>
  );
}

Answer 1

Как указано в документах :

Если вы используете нотацию styled(MyComponent) и MyComponent не отдает переданную className проп, тогда нет стили будут применены.

// For this to work
const StyledPostForm = styled(PostForm)`
    flex: 9 0;
`;

// You need to apply the className prop to component's top node (Container/Parent)
const PostForm = ({ className }) => (
  <Container className={className}>...</Container>
)