小编Cas_ing的帖子

如何使 Material UI 容器具有完整的宽度和高度？

我试图将 React 项目中的页面包装在 Material UI 容器中，但它用这些奇怪的边距挤压了我的所有内容。它看起来是这样的：

但我希望它看起来像这样全宽：

尚未找到任何其他资源来解释如何更改容器的宽度。有人有解决方法吗？我尝试将容器的宽度调整为 100vw，但它对我的 CSS 没有响应。这是我的代码：

////BUY PAGE

import React from 'react';

import Container from '@mui/material/Container';
import AppBar from '../../components/AppBar/AppBar';
import Footer from '../../components/Footer/Footer';

import './Buy.css';

const Buy = () => {
    return (
        <Container>
            <AppBar />
            <Footer />
        </Container>
    );
};

export default Buy;

Run Code Online (Sandbox Code Playgroud)

////CSS

.buy-container {
    overflow-y: hidden;
    width: 100vw;
}

Run Code Online (Sandbox Code Playgroud)

css reactjs material-ui

22
推荐指数

3
解决办法

8万
查看次数

如何使图像在点击时全屏显示？

我正在制作一个画廊，我希望当您单击每张照片时全屏显示，如下所示：

目前，我在每个图像上都有一个单击处理程序，该zoom处理程序向单击的图像添加一个类。我编写的 CSS 选择器只会放大图像，并且不会像示例中那样将其集中在整个页面上。这是我的代码：

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  align-content: center;
  object-position: center;
  transition: transform ease-in-out 0.5s;
}

.zoom {
  z-index: 1;
  transform: scale(1.5);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Run Code Online (Sandbox Code Playgroud)

<body onload="getPics()">
    <div class="container">
      <h1>Photo Gallery</h1>
      <div class="gallery">
        <img
          src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e"
        /><img
          src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e"
        /><img
          src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQ0NDc3fQ&s=493802e93ec426171750ac2291e2867e"
        />
      </div>
    </div>
  </body>

Run Code Online (Sandbox Code Playgroud)

如何更改zoomCSS 以使图像进入全屏模式？

html javascript css

6
推荐指数

2
解决办法

5万
查看次数

如何将 React 应用程序部署到 Heroku

我已经使用 React 和 Node.js 构建了一个单页天气应用程序，但似乎无法将其部署到 Heroku。到目前为止，我有：

在 Heroku 上创建了一个名为 Weather-app-react-node 的新应用程序
在 CLI 上登录 Heroku
在我的终端中运行命令“heroku git:remote -a Weather-app-react-node”
添加了一个带有“web: npm start”的 Procfile
Ran 'git add .', 'git commit -m "Pushed to heroku"', 'git Push heroku master'

我的终端告诉我它已部署并正在等待，但是当我单击链接时，我收到以下错误消息：

SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

Run Code Online (Sandbox Code Playgroud)

我尝试用谷歌搜索，但似乎找不到与我的情况相关的任何内容。谁知道怎么修它？

heroku-site：https://weather-app-react-node.herokuapp.com/
github： https: //github.com/caseycling/weather-app

heroku node.js reactjs heroku-ci

4
推荐指数

1
解决办法

8982
查看次数

无法运行 Cypress Cucumber 测试。收到奇怪的 Gherkin 错误

当我尝试使用 @badeball/cypress-cucumber-preprocessor 与 Cypress 运行黄瓜测试时，我收到这个奇怪的错误：

这表明错误来自我的duckduckgo.feature文件，如下所示：

Scenario Outline: Steps will run conditionally if tagged
  
  When user visits <site>
  Then <site> search bar will display

  @google
  Examples:
    | site                  |
    | google.com            |

  @duckduckgo
  Examples:
    | site                   |
    | duckduckgo.com         |

Run Code Online (Sandbox Code Playgroud)

这是我的cypress.config.js文件：

const { defineConfig } = require("cypress");
const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
const browserify = require("@badeball/cypress-cucumber-preprocessor/browserify");

async function setupNodeEvents(on, config) {

  await preprocessor.addCucumberPreprocessorPlugin(on, config);
  on("file:preprocessor", browserify.default(config));

  return config;
}

module.exports = defineConfig({
  e2e: {
    specPattern: "**/*.feature",
    setupNodeEvents, …

Run Code Online (Sandbox Code Playgroud)

cypress cypress-cucumber-preprocessor

2
推荐指数

1
解决办法

291
查看次数

标签统计

css ×2

cypress-cucumber-preprocessor ×1

html ×1

material-ui ×1