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

Posted 2023-02-22

【中文标题】放置边框颜色反应材质主题

【英文标题】：Put Border Color React Material Theme

【发布时间】：2020-10-17 18:20:48

【问题描述】：

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

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

【参考方案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