React Material-UI工具提示字体大小

时间:2020-01-28 05:55:50

标签: reactjs material-ui tooltip

我正在尝试使用自定义类将字体大小应用于material-ui的工具提示组件。

import React, { Component } from 'react';
import Grid from '@material-ui/core/Grid';
import { FormControl, InputLabel, TextField} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip';

const useStyles = makeStyles(theme => ({
  customFontSize:{
    fontSize: "55px"
  }
}));

const longText = `
Aliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus.
Praesent non nunc mollis, fermentum neque at, semper arcu.
Nullam eget est sed sem iaculis gravida eget vitae justo.
`;

class ToolTipDemo extends Component {  
  constructor(props){
    super(props);
    }
    render() { return <span>
        <Grid item md={12} style={{paddingBottom:'15px'}}>              
              <Grid item md={9}>
              <InputLabel htmlFor="description" style= {{textAlign:'left', fontWeight:'bold'}}>Description</InputLabel>

                  <FormControl style={{minWidth:'200px', width:'100%'}}>
                  <Tooltip title={longText} classes={{ tooltip: useStyles.customFontSize}}>
                   <TextField
                    id="description" variant="outlined" autoComplete="off"
                    multiline rows="2" /> 
                  </Tooltip>        
                  </FormControl>
                <br/>
        </Grid>
     </Grid>
        </span> 
  }
}

export default ToolTipDemo;

但是我声明的它不适用。有人可以帮我申请样式课时所缺少的吗?

0 个答案:

没有答案
相关问题