如何更改 material-ui-next 中的 <NavLink /> 默认样式？

Question

我正在创建一个导航栏。以下是一些样式：

  flex: {
    flex: 1,
  },
  ulStyles: {
    listStyleType: 'none',
    display: 'flex',
    justifyContent: 'flex-start',
  },
  liItem: {
    marginLeft: 20,
  },
  active: {
    textDecoration: 'underline white',
  },

这是来自 AppBar (source) 的片段：

  <Typography type="title" color="inherit" className={classes.flex}>
    <ul className={classes.ulStyles}>
      <li className={classes.liItem}>Home</li>
      <li className={classes.liItem}><NavLink exact activeClassName={classes.active} to='/'>Home</NavLink></li>
      <li className={classes.liItem}><NavLink activeClassName={classes.active} to='/battle'>Battle</NavLink></li>
      <li className={classes.liItem}><NavLink activeClassName={classes.active} to='/popular'>Popular</NavLink> </li>
    </ul>
  </Typography>

结果如下：

如何摆脱 <NavLink /> 的默认样式？

我厌倦了用内联样式覆盖：

const navLink = {
    color: '#ffffff',
    textDecoration: 'none',
};

<li className={classes.liItem}><NavLink exact activeClassName={classes.active} to='/' style={navLink}>Home</NavLink></li>

但现在标签变白了，我的

  active: {
    textDecoration: 'underline white',
  },

没用

Answer 1

Material UI 允许通过两种方式执行此操作：

1. 用类覆盖样式：

当 className 属性不够用时，您需要访问更深层次的元素，您可以利用 classes 属性来自定义 Material-UI 为给定组件注入的所有 CSS。每个组件的类列表记录在组件 API 部分中。例如，您可以查看 Button CSS API。或者，您可以随时查看实现细节。

这个例子也使用 withStyles()（见上文），但 OverridesClasses 使用 Button 的 classes 属性来提供一个数组，其中包含要覆盖的类的名称（键）和要应用的 CSS 类名称（值）。组件的现有类将继续注入，因此只需提供您希望添加或覆盖的特定样式。

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';

const styles = {
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    borderRadius: 3,
    border: 0,
    color: 'white',
    height: 48,
    padding: '0 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)',
  },
  label: {
    textTransform: 'capitalize',
  },
};

function OverridesClasses(props) {
  return (
    <Button
      classes={{
        root: props.classes.root, // className, e.g. `OverridesClasses-root-X`
        label: props.classes.label, // className, e.g. `OverridesClasses-label-X`
      }}
    >
      {props.children ? props.children : 'classes'}
    </Button>
  );
}

OverridesClasses.propTypes = {
  children: PropTypes.node,
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(OverridesClasses);

1. 用内联样式覆盖：

覆盖组件样式的第二种方法是使用内联样式方法。每个组件都提供一个样式属性。这些属性始终应用于根元素。

您不必担心 CSS 的特殊性，因为内联样式优先于常规 CSS。

import React from 'react';
import Button from 'material-ui/Button';

// We can use inline-style
const style = {
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  borderRadius: 3,
  border: 0,
  color: 'white',
  height: 48,
  padding: '0 30px',
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)',
};

function OverridesInlineStyle() {
  return <Button style={style}>inline-style</Button>;
}

export default OverridesInlineStyle;

https://material-ui-next.com/customization/overrides/