Question

我正在与react js一起使用卡创建接口。在这之间，我遇到了一个问题，

我完全无法在代码中使用样式类

我已经在名为card.js的js文件中编写了代码，以创建一些样式表类，并且代码如下所示。

import React from 'react';
const Color = {"default" : "#ffff","grey": "#808080"};
export const styles = theme=>({
    card:
    {
        width: "400px",
        height: "600px",
        backgroundColor: Color.default,
        borderRadius: "5px",
        border: "1px solid"+Color.grey,
    }
});

我已使用以下代码将导出的样式导入到名为activity.js的文件中。

import React from 'react';
import {styles} from './card';
var Activity = (props)=>{
    return(
        <div>
            <h1 className={styles.card}>Card 1</h1>
            <h1 className={styles.card}>Card 2</h1>
        </div>
    );
}
export default Activity;

这里没有样式被添加到h1标签。我被卡住了，请帮助我。

Answer 1

可以使用'@ material-ui / styles'中的withStyles函数。下面的网址中显示了一个示例：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/styles';
import Button from '@material-ui/core/Button';

const styles = {
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
};

function HigherOrderComponent(props) {
  const { classes } = props;
  return <Button className={classes.root}>Higher-order component</Button>;
}

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

export default withStyles(styles)(HigherOrderComponent);

带有样式类的常量变量在reactjs中不起作用

1 个答案: