在 React 中，樣式組件的 flex 不起作用

Question

我嘗試使用樣式組件。 但是現在，我正在使用“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>
)