标签: jss

我试图了解 clsx 在为 React 中的组件分配类名时的一些用途。

构造

className={clsx(classes.menuButton, open && classes.hide)} 

够清楚了。它应用'classes.menuButton'，如果布尔值'open' 的值为真，它也应用'classes.hide'。

我的问题与第二个例子有关：

className={clsx(classes.appBar, {[classes.appBarShift]: open })}

这将应用“classes.appBar”。但是第二个参数是什么意思呢？

我已经学会了使用 @keyframe 在 css 中使用动画。然而，我想将我的自定义动画代码写入我的反应项目（使用 materialUI）。我的挑战是如何使用 MaterialUI 中的 makeStyle() 编写 javascript 代码来自定义我的动画。这次我希望能够在 materialUI 中以百分比形式自定义转换过程。我需要能够在 makeStyle() 中编写这样的代码，但我似乎不知道该怎么做。

@keyframes myEffect {
 0%{
  opacity:0;
  transform: translateY(-200%); 
 }

100% {
  opacity:1;
  transform: translateY(0);
 }
}

使用css-in-js方法向react组件添加类,如何添加多个组件？

这是classes变量:

const styles = theme => ({
 container: {
  display: 'flex',
  flexWrap: 'wrap'
},
 spacious: {
  padding: 10
},
});

这是我如何使用它:

    return (
     <div className={ this.props.classes.container }>

上面的工作,但是有没有办法添加两个类,而不使用classNamesnpm包？就像是:

     <div className={ this.props.classes.container + this.props.classes.spacious}>

通常,在使用纯CSS时,我有一个包含以下内容的样式表:

html {
    height: 100%;
}

body {
    font-size: 14px;
}

styled-components在我的React项目中使用时,如何为htmlor或bodytags 设置样式？我是否仅为此目的维护一个单独的CSS文件？

试图将一些代码从jss移植到样式组件,jss代码看起来像:

//...
const styles = {
  myStyles: {
    color: 'green'
  }
}

const {classes} = jss.createStyleSheet(styles).attach()

export default function(props) {
  return (
     <div>
       <Widget1 className={classes.myStyles}/>
       <Widget2 className={classes.myStyles}/>
     </div>
  )
}

我的问题是在多个组件中实现相同样式共享的惯用方法是什么？

我在反应中使用 material-ui。假设我有这些样式的组件

const useStyles = makeStyles(theme => ({
  outerDiv: {
    backgroundColor: theme.palette.grey[200],
    padding: theme.spacing(4),
    '&:hover': {
      cursor: 'pointer',
      backgroundColor: theme.palette.grey[100]
   }
  },
  addIcon: (props: { dragActive: boolean }) => ({
    height: 50,
    width: 50,
    color: theme.palette.grey[400],
    marginBottom: theme.spacing(2)
  })
}));

function App() {
  const classes = useStyles();
  return (
    <Grid container>
      <Grid item className={classes.outerDiv}>
        <AddIcon className={classes.addIcon} />
      </Grid>
    </Grid>
  );
}

我想使用上面的样式将鼠标悬停在 externalDiv 上时更改 addIcon 的样式。

这是我的例子：https : //codesandbox.io/s/trusting-mcnulty-b1gcd?fontsize=14&hidenavigation=1&theme=dark

我似乎无法弄清楚如何更改轮廓颜色的轮廓颜色我看了看GitHub问题,人们似乎指向使用"InputProps"属性,但这似乎什么都不做. 这是我当前状态下的代码

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

const styles = theme => ({
field: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    height: '30px !important'
},
});

class _Field extends React.Component {
      render() {
          const { classes, fieldProps } = this.props;
             return (
                <TextField
                {...fieldProps}
                label={this.props.label || "<Un-labeled>"}
                InputLabelProps={{ shrink: true }} // stop from animating.
                inputProps={{ className: classes.fieldInput }}
                className={classes.field}
                margin="dense"
               variant="outlined"
            />
        );
    }
}

_Field.propTypes = { …

目前，我正在努力将 MenuItem 组件的背景颜色设置为不同的颜色。（无需使用 !important 强制它）

组件代码：

<MenuItem
 classes={{
  root: this.props.classes.root,
  selected: this.props.classes.selected
 }}
 value={10}>
  Alfabetical
</MenuItem>

这是CSS：

const homePageStyle = (theme) => ({
  root: {
    width: "300px"
  },
  selected: {
    backgroundColor: "turquoise !important",
    color: "white",
    fontWeight: 600
  }
});

我想达到什么目标？

我想设置 MenuItem 的 backgroundColor 而不必设置 !important 标志。我已经用大量组件完成了这项工作，但目前这似乎行不通。

我正在使用版本“@material-ui/core”：“^1.0.0-rc.0”，

谢谢你的帮助。

我正在尝试将我的组件从 MUI v4 迁移到 v5，但我已经不知道如何迁移我的makeStyles组件了。

之前，我有过类似的工作：

const useStyles = makeStyles((theme: Theme) => ({
  paper: {
    padding: theme.spacing(2),
    someMore: 'styles'
  }
}));
// ...

const Component: FC = () => {
  const theme = useTheme();
  const classes = useStyles(theme);

   return (
      <Paper elevation={3} className={classes.paper}>
         <Stuff />
      </Paper>
   )
}

现在我在通话时遇到错误useStyles：

该表达式不可调用。类型“never”没有调用签名.ts(2349)

这种情况下的解决方法是什么？

目前我使用以下代码使用jss为元素添加颜色.

const styleSheet = theme => ({
  root: {
     backgroundColor: theme.colors.red,
  },
})

我想知道是否存在一个基于颜色添加不透明度的函数theme.colors.red.

smt的例子如: backgroundColor: color(theme.colors.red, .05),