小编Ale*_*zea的帖子

我使用一个mat-form-field有textarea内部的常规。我的问题是此 Textarea 的占位符文本相当长。在移动设备中，空间更加有限，此占位符文本会被带有省略号的 Angular Material 截断。

我想让占位符文本通过向下移动到下一行来调整空间限制。因此，例如，而不是：

This is a really long text and it cannot fit on a single li...

我想：

This is a really long text and it cannot fit on a single
line

我已经尝试了各种方法来更改mat-input-placeholderand的 CSS，但mat-input-placeholder-wrapper没有成功。我知道解决方案的一部分涉及更改 text-overflow 属性（如下），但我无法获得其他部分。

::ng-deep .mat-input-placeholder {
  text-overflow: clip;
}

任何人都可以帮忙吗？

谢谢！

我有一个基于 Webpack 4 的 SSR React-TypeScript 应用程序，我对每个 React 组件使用 SCSS。我使用了两个 Webpack 配置文件，一个用于客户端包，一个用于服务器包。

我对如何使用 MiniCssExtractPlugin 在客户端 Webpack 配置上加载我的 SCSS 感到困惑。该文档不是很有帮助。很明显，这个规则在模块内部是必要的：

{
    test: /\.scss$/,
    use: [
        MiniCssExtractPlugin.loader,
        "css-loader",
        "sass-loader"
    ]
}

但不清楚应该放哪个文件：

plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
        filename: devMode ? '[name].css' : '[name].[hash].css',
        chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    })
],

我的 SCSS 文件遍布整个应用程序：每个 React 组件都有自己的 SCSS 文件。我不知道如何将这些文件传递给 MiniCssExtractPlugin。

对于服务器 Webpack 配置，我有以下内容来加载我的 SCSS 文件，但我不知道它是否足够：

{
    test: /\.scss$/,
    use: ["css-loader", "sass-loader"]
}

如果可能的话，我很想看到类似应用程序的实际工作示例。

我的 css 文件由 MiniCSS 生成：

.home {
  text-align: center; …

我有一个 React 16 应用程序，并希望允许用户通过按下按钮来更改整个应用程序（包括所有路由）的主题。

例如，我可以在 SCSS 中有两个主题：

.theme-1 {
    background-color: $bg-color-1;
    color: $color-1;
}
.theme-2 {
    background-color: $bg-color-2;
    color: $color-2;
}

然后我会有一个按钮，如下所示：

<Button onClick={ this.changeTheme() }

这能做到吗？具体来说，我想弄清楚这两个部分：

1. 如何在需要使用各种background-color和color.
2. changeTheme()函数的逻辑。它究竟会如何触发所有受影响组件的重新渲染。

谢谢！

我有一个 Angular 5 应用程序，它必须mat-select在 Bootstrap 模态中使用 Angular Material 。问题是下拉选项出现在模态后面。我的代码如下所示：

<mat-form-field class="mdb-form-field form-adjustments">
    <mat-select placeholder="What fruit are you looking for?" [formControl]="fruitType" [(ngModel)]="defaultFruitType">
        <mat-option *ngFor="let fruitType of fruitTypes" [value]="fruitType">{{ fruitType }}
        </mat-option>
    </mat-select>
</mat-form-field>

我知道我应该使用z-index将 Angular Material 的选择选项带到前面。但问题是上什么课？我尝试将其应用于 Angular Material 的多个类，但无济于事。以下所有方法都失败了：

body div.cdk-overlay-container {
  z-index: 99999;
}

/deep/ .cdk-overlay-pane {
  z-index: 99999 !important;
}

/deep/ .cdk-global-overlay-wrapper, .cdk-overlay-container {
  z-index: 99999 !important;
}

.mat-select-menu-container {
  z-index: 99999 !important;
}

.mat-dialog-container {
  z-index: 99999;
}

/deep/ .mat-select-panel {
  z-index: 99999 …

我想将 HTTP 流量重定向到 HTTPS，因为这是 PWA 的 Lighthouse 要求。我的网站是用 Gatsby 构建的。

我发现了像下面这样的各种插件，它们似乎暗示答案来自修改.htaccess文件。

https://www.gatsbyjs.org/packages/gatsby-plugin-htaccess/

对于上面的插件，我尝试了如下配置，没有通过PWA审计：

{
      resolve: 'gatsby-plugin-htaccess',
      options: {
        RewriteBase: '/custom/',
        https: true,
        www: true,
        SymLinksIfOwnerMatch: true,
        host: 'av-site.com',
        redirect: [
          'RewriteRule ^not-existing-url/?$ /existing-url [R=301,L,NE]',
          {
            from: 'http:av-site.com',
            to: 'https:av-site.com',
          },
        ],
      },
    },

谁能帮帮我吗？谢谢！