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允许两种方法：

使用类重写样式：

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

此示例还使用withStyles（）（参见上文），但OverridesClasses正在使用Button的类prop来提供一个数组，其中包含要覆盖的类的名称（键）以及要应用的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);

使用内联样式覆盖：

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

您不必担心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/

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

1 个答案: