在 React 中，样式组件的 flex 不起作用

Question

I trying to work with styled-components. However now, I 'm using "flex" for responsive design, But I can't figure it out.

CSS of styled-components doesn't work. I don't see those styles on my website

Below is outline of my styling

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;
`;

and I adjust like this

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

As stated in the docs :

If you use the styled(MyComponent) notation and MyComponent does not render the passed-in className prop, then no styles will be applied.

// 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>
)