material-ui - 如何更改边框颜色？答案

【问题标题】：material-ui - How to change borderColor?material-ui - 如何更改边框颜色？
【发布时间】：2020-12-26 11:36:00
【问题描述】：

我正在尝试将 border-top 和 border-bottom 添加到 Material UI 中的 <Box> 组件（使用 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，我看到了按预期定义的顶部边框颜色，而底部边框颜色甚至没有定义。请参阅下面的屏幕截图。

我错过了什么？

【问题讨论】：

这可能是一个错误，当我使用与 Material UI 边框颜色代码笔不同的默认边框大小时，我遇到了一些相当不一致的结果。可能是时候使用 makeStyles 手动设置样式了（不是最佳解决方案，而是一种解决方法）。
这个问题已经得到解答，但您始终可以覆盖任何 MUI 组件上的某些样式（有多种方法可以做到这一点）。一个例子是https://codesandbox.io/s/material-demo-forked-3pb7z?file=/demo.js，它包装了盒子组件并手动处理边框颜色的样式（为了速度，这使用了许多增加应用程序大小的第三方包）。

标签： reactjs material-ui

【解决方案1】：

在 Material UI 5 中，您可以这样做来设置组件的各个边框（框、纸、排版...）

<Paper 
  sx={{borderLeftColor: 'primary.main', borderLeftStyle: 'solid', borderLeftWidth: '0.1em'}}>
  "Your content"
</Paper>

【讨论】：

【解决方案2】：

这是 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>

【讨论】：

【解决方案3】：

嗨@Adriano，我在sandbox 中尝试过，并注意到“borders”道具是问题所在，因为要么没有像“borders”这样的道具。我刚刚删除了它，它工作正常。

编辑：我在 GitHub 上看到了这个并且它有效。 https://github.com/mui-org/material-ui/issues/16995#issuecomment-594134826

【讨论】：

这对我来说顶部是蓝色，底部是黑色。
你是对的。这是我在尝试新事物时添加的多余属性。我已将其从代码中删除，但我仍然看到两个不同颜色的边框；在我的应用程序和您的沙盒中。
你好，对不起，我认为它有效，它只是被缓存了。但是检查了这个link。我编辑了我的沙盒。