I am currently working with styled-components, and I have been using "flex" for responsive design. However, I am facing some challenges in implementing it.
The CSS defined within styled-components does not seem to be applying properly. The styles are not reflecting on my website
Here is an overview 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 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;
`;
In an attempt to resolve this issue, I made the following adjustments:
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>
);
}