Material-ui - 如何更改边框颜色？

Question

我正在尝试将border-top和添加border-bottom到<Box>Material UI 中的组件（使用 React）。

通过遵循官方文档https://material-ui.com/system/borders/
我在我的应用程序中添加了以下代码：

import React from "react";
import { Container } from "@material-ui/core";
import Box from "@material-ui/core/Box";

const App = () => (
  <Container>
    <Box 
       borderColor="primary.main" 
       borderTop={4} 
       borderBottom={4}
    >
      QUOTE, and preview
    </Box>
  </Container>
);

export default App;

而在浏览器中的结果如下：

正如您所看到的，正如我所期望的那样，边框颜色并未均匀地应用于顶部和底部。
我希望两个边框（顶部和底部）都是蓝色的，按照primary.main.

通过查看浏览器中的 DOM，我看到顶部边框颜色按预期定义，而底部边框颜色甚至没有定义。请参阅下面的屏幕截图。

我缺少什么？

Answer 1

这是 Box 材质 UI 的错误。您可以查看：https ://github.com/mui-org/material-ui/issues/16995 。这是解决方案：

 <Box
      border={4}
      borderLeft={0}
      borderRight={0}
      borderColor="primary.main"
    >
      QUOTE, and preview
    </Box>