放置边框颜色反应材质主题

【问题标题】：Put Border Color React Material Theme放置边框颜色反应材质主题
【发布时间】：2020-10-17 18:20:48
【问题描述】：

如何将材质颜色主题放在边框中，如下面的代码

border: '2px solid (theme.palette.primary.main)',

【问题讨论】：

标签： css reactjs jss react-material

【解决方案1】：

您需要使用template literals。

 border: `2px solid ${theme.palette.primary.main}`

如何访问theme 对象取决于您的其余代码。在函数组件中，这可能如下所示：

const useStyles = makeStyles(theme => ({
  /// your style declarations
})

其他示例请参考documentation。

【讨论】：

【解决方案2】：

您可以在组件中使用已定义的主题与useTheme：

import React from "react";
import { useTheme } from '@material-ui/core/styles';

export default function YourComponent() {
  const theme = useTheme();

  return (
      <div style={{
        width: '200px',
        background: '#D3D3D3',
        height: '200px',
        border: `2px solid ${theme.palette.primary.main}`,
      }}>Div with themed border color</div>
  );
}

发现它在这里工作： https://codesandbox.io/s/laughing-rain-5iwbq

【讨论】：