Question

我正在尝试将内联css应用于react表单元，在代码中由div元素周围的***显示。它可以像现在使用Style = ....声明的那样工作，但是我想使用className ='textvertalign'代替，当我尝试使用className时，它似乎不起作用。我似乎无法确定为什么它不能与className一起使用。当我计划将其应用于更多单元时，能够引用此CSS会很好。提前致谢。

const styles = theme => ({
    textvertalign:{
    display:'flex', justifyContent:'center'
    }
});

class UserManagement extends React.Component {
return
<div>
    <ReactTable key={this.state.tablePageSize} 
        data={this.state.portalUsers} 
        filterable 
        defaultFilterMethod={filterCaseInsensitive}
        columns={[{
             columns: [{
                 Header: <div style={{ fontSize: '16px', textAlign: 'center', fontWeight: 'bold' }}>Edit</div>,
                 width: 90,
                 id: "Edit",
                 className: "align-center",
                 Cell: ({ row }) => (
                     ***<div style={{display:'flex', justifyContent:'center'}}>***
                         <button className="FlatButton"
                             onClick={e => this.handleDialogOpen(e, row)}>
                             {
                                 <FontAwesomeIcon style={{ color: '#FF3933' }} icon="edit" />
                             }
                          </button>
                     </div>
                 )
             }....
    </ReactTable>
</div>
}
UserManagement.propTypes = {
classes: PropTypes.object.isRequired,};

export default withStyles(styles)(UserManagement);

Answer 1

在这里找到了说明和解决方案：https://codex.happyfuncorp.com/styling-and-theming-with-material-ui-react-material-design-3ba2d2f0ef25

为了能够使用样式中的CSS，我必须添加： const {classes} = this.props; //在渲染中 className = {classes.textvertalign} //引用该CSS。

我认为这与withStyles导出css有关，我们需要将其重新导入以使用它。

CSS内联样式在使用className时不适用于反应表单元格

1 个答案: