小编Ped*_*ira的帖子

我想使用相同的卡片并使它们居中对齐，我搜索并尝试了一些解决方案，但所有这些都只对齐组件网格，而不是组件内容本身（我需要它们与边框和它们自身的距离相等）。

我正在使用此代码（https://codesandbox.io/embed/32o8j4wy2q）：

<Grid
      container
      spacing={0}
      direction="column"
      alignItems="center"
      justify="center"
      style={{ minHeight: '80vh' }}>
      <Grid container item xs={12} spacing={8}>
        <Grid item xs={6}>
          <Card />
        </Grid>
        <Grid item xs={6}>
          <Card />
        </Grid>
        <Grid item xs={6}>
          <Card />
        </Grid>
        <Grid item xs={6}>
          <Card />
        </Grid>
      </Grid>
    </Grid>

卡片代码无关紧要，但我只是复制了 material-ui 的示例之一。

另外，如果我将来决定添加或删除一些卡片，我该如何使用 flexboxes（或其他工具）来自动对齐？

我想设计一个在表单字段中具有标签和输入的表单，当我在输入中写一些东西时（可能有焦点），我希望边框用一些蓝色点亮。现在我有这样的事情：

HTML

<div class="login-form-field">
  <label for="email" class="login-form-label">Email:</label>
  <input class="login-form-input" autofocus="autofocus" type="email" value="" name="user[email]" id="user_email">
</div>

CSS

.login-form-input{
  margin-left: 20px;
  width: 90%;
  outline: none;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: 0 0 0px 1000px white inset;
}
.login-form-label {
  font-size: 13px;
  font-weight: 300;
  padding-left: 20px;
}
.login-form-field{
  width: 100%;
  border-radius: 0px;
  height: 6rem;
  border: 0.5px solid grey;
  box-shadow: 0px 0px 0px;
}

我已经尝试选择父母进行一些更改以及我在谷歌上找到的其他内容。我得到的最接近的是当鼠标悬停在它上面时用蓝色突出显示：悬停，但我需要颜色保持我选择的输入。

.login-form-field:hover {
  border-color: blue !important;
}

这是JSFiddle，如果有人可以提供帮助，我将不胜感激！

我使用 React 和 Material-UI 一段时间，我注意到在一些示例中，当他们使用时，他们useStyle创建一个名为 root 的类，然后使用这个标签& > *。我尝试搜索这意味着什么，但很难搜索它。

以下是他们文档中的示例：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    '& > *': {
      margin: theme.spacing(1),
      width: theme.spacing(16),
      height: theme.spacing(16),
    },
  },
}));

export default function SimplePaper() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Paper />
    </div>
  );
}

我正在一个Rails项目中工作,我正在做一个简单的点击提醒类似这样的功能:

html.erb

<%= button_tag 'button', type: 'button', class: 'right-button' %>

JavaScript的

$(".right-button").on("click", alert("right-button clicked!"));

问题是,当我加载页面(ctrl + F5)时,即使没有按下按钮也会触发警报,当我按下按钮时,没有任何反应.我已经尝试过使用:

$(document).ready(function() { 
});

但它也没有用.我甚至试图将JavaScript插入html.erb:

<%= button_tag 'button', type: 'button', class: 'right-button' %>
<script type="text/javascript">
  $(".right-button").on("click", alert("right-button clicked!"));
</script>

如果你知道发生了什么,请帮助,谢谢!

PS:Turbolinks被禁用了!

我正在尝试从 API 获取图像数据。为此，我首先需要获取它的 ID，然后使用它来获取图像。为了保持干净的代码，我使用了一个函数来做到这一点，当我尝试将响应返回给我调用该函数的组件时遇到了问题。

获取下一个图像数据

export const getNextImageData = () => {
  const apiToken = lscache.get('apiToken')
  return(
    axios({
      method: 'get',
      url: 'https://myapiurl/images/',
      params: {
        limit: '1',
        doc_cat: ''
      },
      responseType: 'json'
    })
      .then(response => {
        lscache.set('imageData', response, 30)
        axios({
          method: 'get',
          url: 'https://myapiurl/images/' + response.data[0].id + '/',
        })
          .then(response => {
            return(response.data)
          })
      })
  )
}

我的课

class MyClass extends Component {
  constructor(props){
    super(props);
    this.state = {
      image: undefined
    }
  }
  async componentDidMount() {
    const data = await getNextImageData()
    this.setState({ …

我正在使用 Material UI 的 Switch 组件，我想在其中添加文本。我还需要使它的形状呈方形。

如何在 Switch 组件中添加文本。它应该在选择时打开，默认时关闭。我正在以 reactjs 形式在 Formcontrol 中使用 Material UI 的 Switch。

<FormControlLabel 
  label="Private ? "
  labelPlacement="start"
  control={
    <Switch
       checked={this.state.checked}
       onChange={this.handleChange}
       color='primary'
    />
  } 
/>