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

【问题标题】：In React, styled component's flex not working在 React 中，样式化组件的 flex 不起作用
【发布时间】：2020-05-11 14:33:11
【问题描述】：

我尝试使用样式化组件。但是现在，我正在使用“flex”进行响应式设计，但我无法弄清楚。

样式组件的 CSS 不起作用。我在 my website 上没有看到这些样式

下面是我的造型大纲

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>
  );
}

【问题讨论】：

向我们展示您尝试设置样式的组件之一（例如PostForm），请记住，在提出问题时您应该制作一个可生产的示例：How to create a Minimal, Reproducible Example

标签： javascript css reactjs styled-components

【解决方案1】：

如docs中所述：

如果您使用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>
)

【讨论】：