<NavLink />デフォルトのスタイリングをmaterial-ui-nextで変更するにはどうすればよいですか？

Question

私はナビゲーションバーを作成しています。ここではいくつかのスタイルがあります：

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

はここでアプリケーションバー（source）からの断片です： 私はその<NavLink />デフォルトのスタイリングを取り除くことができますどのように

：

<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> 

ここでの結果ですか？

私は、インラインスタイルで上書きして疲れるよ：

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

材質は動作しません。 UIではこれを行うには2通りの方法があります：

classNameプロパティが十分でない、とあなたはより深い要素にアクセスする必要がある場合、あなたは材質によって注入すべてのCSSをカスタマイズするには、クラスの性質を利用することができる

：

は、クラスでのスタイルをオーバーライド
1. 指定されたコンポーネントの-UI。各コンポーネントのクラスのリストは、「コンポーネント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); 
   

2. インラインスタイルでオーバーライド：

コンポーネントのスタイルを上書きする第二の方法は、インラインスタイルのアプローチを使用することです。すべてのコンポーネントはスタイルプロパティを提供します。これらのプロパティは、常にルート要素に適用されます。

インラインスタイルが通常の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/