放置边框颜色 React Material 主题

Question

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

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

Answer 1

您需要使用template literals。

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

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

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

其他例子请参考documentation

Answer 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

放置边框颜色 React Material 主题

Put Border Color React Material Theme

css

reactjs

jss

react-material