Question

我尝试使用样式化组件。但是现在，我将“ 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>
  );
}

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

在React中，样式化组件的flex无法正常工作

1 个答案: