web-dev-qa-db-ja.com

Material-UI next-ListItemText内のテキストのスタイル設定

listItemText（Material-UI @next）内のテキストにスタイルを適用しようとしています：

const text = {
  color: 'red'
}

<ListItem button><ListItemText style={text} primary="MyText" /></ListItem>

しかし、レンダリングされた<Typograhy>要素内のスタイルはまったく設定されていません（ "MyText"は赤ではありません）。

生成されたコードを見ると、Typography> subheadingのデフォルトのCSSルールが私のCSSをオーバーライドしているようです。

ご協力いただきありがとうございます

編集：質問の最初のバージョンでは、ミス（ListItemTextの「スタイル」の代わりに「クラス名」、それについて申し訳ありません）がありました。

reactjsmaterial-ui
18
Julien Tanay

これを今すぐ達成する唯一の方法は、ListItemText要素の「disableTypography」プロップを使用することです。

 <ListItemText
        disableTypography
        primary={<Typography type="body2" style={{ color: '#FFFFFF' }}>MyTitle</Typography>}
      />

これにより、独自のテキスト要素を好きなスタイルで埋め込むことができます。

24
Sundaram Ravi

これを行うには、さらに良い方法があります：

const styles = {
  selected: {
    color: 'green',
    background: 'red',
  },
}

const DashboardNagivationItems = props => (
  <ListItemText
    classes={{ text: props.classes.selected }}
    primary="Scheduled Calls"
  />
)

export default withStyles(styles)(DashboardNagivationItems)

これがどのように行われるかについて詳しくは、こちらをご覧ください： https://material-ui-next.com/customization/overrides/#overriding-with-classes

8
Andre Romano
            <ListItem >
                    <Avatar style={{ backgroundColor: "#ff6f00" }}>
                      <LabIcon />
                    </Avatar>
                    <ListItemText 
                     primary={<Typography variant="h6" style={{ color: '#ff6f00' }}>Lab</Typography>}
                     secondary="Experiments" />
                  </ListItem>

enter image description here

8
Hitesh Sahu

this は良いものです。タイポグラフィを無効にすることなく実装できます

<ListItemText 
   classes={{ primary: this.props.classes.whiteColor }}
   primary="MyTitle"
/>
4
Sachin srinivasan

マテリアルv1.0

以下に関して、@ SundaramRaviに何かを追加します。

  • material v1.0の場合はあまり優れていないスタイル要素の使用方法（ v0.16 + と v1. の非常に重要な違いを読んでください。
  • 関心の分離を改善するためのファイルの構造化方法。

Whatever.styles.js

const styles = theme => ({
  white: {
    color: theme.palette.common.white
  }
});

exports.styles = styles;

Whatever.js

const React = require('react');
const PropTypes = require('prop-types');
const {styles} = require('./Whatever.styles');

class Whatever extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {classes} = this.props;
    return (
      <div>
        <ListItemText
          disableTypography
          primary={
            <Typography type="body2" style={{body2: classes.white}}>
              MyTitle
            </Typography>
          }
        />
      </div>
    );
  }
}

Whatever.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired
};

exports.Whatever = withStyles(styles, {withTheme: true})(Whatever);
3
Mick

ドキュメント ごとに、<ListItemText />コンポーネントは、プロップprimaryTypographyPropsを公開します。これは、質問であなたが試みていることを達成するために使用できます。

const text = {
    color: "red"
};

<ListItem button>
    <ListItemText primaryTypographyProps={{ style: text }} primary="MyText" />
</ListItem>

お役に立てば幸いです！

1
josephemswiler

Material-ui 3.xを使用している場合、次のようにします。

import { withStyles } from '@material-ui/core/styles';

const styles = {
  listItemText: {
    color: 'white',
  },
}

class YourComponent extends Component {
...
render() {
    const { classes } = this.props; // this is magically provided by withStyles HOC.
    return (
          <ListItem button>
            <ListItemIcon>
              <DashboardIcon />
            </ListItemIcon>
            <ListItemText classes={{ primary: classes.listItemText }} primary="My Bookings" />
          </ListItem>
    );
...

}
export default withStyles(styles)(YourComponent);

primaryプロパティですべてのテキスト関連スタイルを設定します。文書の奥深くに隠されているのは悲しいことです。 https://material-ui.com/api/list-item/

1
saran3h