Html 我想在带有样式化组件的列流中显示组件

我是react风格组件的新手

为什么下一个代码不以列的方式显示元素

import styled from 'styled-components'

const CategoryButton = styled.button`
  font-family: sans-serif;
  font-size: 1.3rem;
  border: none;
  border-radius: 5px;
`
const categoryFilterContainer = styled.div`
  display: flex;
  flex-direction: column;
`

function App() {
  var catArr = ['option 1', 'option 2', 'option 3']
  return (
    <categoryFilterContainer>
      {catArr.map(category => {
        return (
          <CategoryButton>{category}</CategoryButton>
        )
      })}
    </categoryFilterContainer>
  );
}

export default App;

从“样式化组件”导入样式化
const CategoryButton=styled.button`
字体系列：无衬线；
字体大小：1.3rem；
边界：无；
边界半径：5px；
`
const categoryFilterContainer=styled.div`
显示器：flex；
弯曲方向：立柱；
`
函数App（）{
var catArr=['选项1'，'选项2'，'选项3']
返回(
{catar.map（类别=>{
返回(
{类别}
)
})}
);
}
导出默认应用程序；

categoryFilterContainer表示流向为柱状

我做错了什么

---

Rafael

如果您希望将项目显示为三列，那么您对flex direction使用了错误的CSS值

flex-direction:column

将项目放置在彼此上方

flex-direction:row

将使项目彼此相邻

.col、.row{display:flex}
.col{flex direction:column}
.row{flex direction:row}

伸缩方向：列

1. 2. 3. 弯曲方向：行

1. 2. 3.

---

如果您想将项目显示为三列，那么您对flex direction使用了错误的CSS值

flex-direction:column

将项目放置在彼此上方

flex-direction:row

将使项目彼此相邻

.col、.row{display:flex}
.col{flex direction:column}
.row{flex direction:row}

伸缩方向：列

1. 2. 3. 弯曲方向：行

1. 2. 3.

---

您定义的所有组件

因此，您的容器组件

categoryFilterContainer

应该重命名为

categoryFilterContainer

，然后

<CategoryFilterContainer>
  ...
</CategoryFilterContainer>

...

---

您定义的所有React组件

因此，您的容器组件

categoryFilterContainer

应该重命名为

categoryFilterContainer

，然后

<CategoryFilterContainer>
  ...
</CategoryFilterContainer>

...

---

你能分享输出的屏幕截图吗？当你说“column fashion”时，你的意思是按照

flex direction:column，即3个选项堆叠在一起？或者并排，因为每个选项都有自己的列。不太确定你能分享输出的截图吗？当你说“column fashion”时，你的意思是按照
flex-direction:column，即3个选项堆叠在一起？或者并排，因为每个选项都有自己的列。不太确定通过你的措辞验证，这看起来是你的问题。验证，这看起来是你的问题。