无法更改我的打字稿文件中 <DefaultButton> 的背景颜色

Posted 2023-03-13

【中文标题】无法更改我的打字稿文件中 <DefaultButton> 的背景颜色

【英文标题】：Unable to change the background-color for the <DefaultButton> inside my typescript file

【发布时间】：2021-12-27 15:03:06

【问题描述】：

我的 SharePoint SPFx Web 部件中有以下打字稿文件，它呈现如下 2 个按钮：-

import * as React from 'react';
import * as styles from './ModalPopup.module.scss'; 
import  IModalPopupProps  from './IModalPopupProps';
import  DefaultButton  from '@fluentui/react/lib/Button';
import  MYModal  from './MYModal';
import  MYModal2  from './MYModal2';

interface IPopupState 
  showModal: string;


export default class MyModalPopup extends React.Component<IModalPopupProps, IPopupState> 
  constructor(props: IModalPopupProps, state: IPopupState) 
    super(props);
    this.state = 
      showModal: ''
    ;
    this.handler = this.handler.bind(this);
    this.Buttonclick = this.Buttonclick.bind(this);
  
  handler() 
    this.setState(
      showModal: ''
    )
  
  private Buttonclick(e, whichModal) 
    e.preventDefault();

    this.setState( showModal: whichModal );
  
  public render(): React.ReactElement<IModalPopupProps> 

    const  showModal  = this.state;

    return (
      <div>
        <DefaultButton className="custombutton" onClick=(e) => this.Buttonclick(e, 'our-value') text="Our Value" />
         showModal === 'our-value' && <MYModal2 OurValue=this.props.OurValue myprops=this.state handler=this.handler />

        <DefaultButton className="custombutton" onClick=(e) => this.Buttonclick(e, 'who-we-are') text="Who We Are" />
         showModal === 'who-we-are' && <MYModal WhoWeAre=this.props.WhoWeAre myprops=this.state handler=this.handler />
      </div>
    );
  

以及以下ModalPopup.module.scss，其中我使用custombutton 类为按钮定义了自定义背景颜色，如下所示：-

@import '~office-ui-fabric-react/dist/sass/References.scss';

.modalPopup 
  .container 
    max-width: 700px;
    margin: 0px auto;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
  

  .row 
    @include ms-Grid-row;
    @include ms-fontColor-white;
    background-color: $ms-color-themeDark;
    padding: 20px;
  

  .column 
    @include ms-Grid-col;
    @include ms-lg10;
    @include ms-xl8;
    @include ms-xlPush2;
    @include ms-lgPush1;
  

  .title 
    @include ms-font-xl;
    @include ms-fontColor-white;
  

  .subTitle 
    @include ms-font-l;
    @include ms-fontColor-white;
  

  .description 
    @include ms-font-l;
    @include ms-fontColor-white;
  

  .button 
    // Our button
    text-decoration: none;
    height: 32px;

    // Primary Button
    min-width: 80px;
    background-color: $ms-color-themePrimary;
    border-color: $ms-color-themePrimary;
    color: $ms-color-white;

    // Basic Button
    outline: transparent;
    position: relative;
    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: $ms-font-size-m;
    font-weight: $ms-font-weight-regular;
    border-width: 0;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    padding: 0 16px;

    .label 
      font-weight: $ms-font-weight-semibold;
      font-size: $ms-font-size-m;
      height: 32px;
      line-height: 32px;
      margin: 0 4px;
      vertical-align: top;
      display: inline-block;
    
  


.custombutton

background-color: #2488d8;
color: white;

但目前这 2 个按钮将使用白色背景色而不是 #2488d8:-

那么为什么我无法更改我的打字稿文件内部的背景颜色？

这是来自开发工具的标记：-

【参考方案1】：

试试<DefaultButton className=styles.custombutton ...

styles 导入的模块化 scss。类名在那个字段中。

你还需要 webpack 中的 scss 加载器

[

                        loader: 'style-loader'
                    ,
                    
                        loader: 'css-loader',
                        options: 
                            importLoaders: 2,
                            modules: 
                                auto: /\.module\.\w+$/i,
                                localIdentName: "core_[path][name]__[local]--[md5:hash:base64:24]",
                            ,

                        
                    ,
                    
                        loader: 'postcss-loader'
                    ,
                    
                        loader: 'sass-loader',
                        options: 
                            sassOptions: 
                                outputStyle: 'expanded'
                            
                        
                    
]

对于模块化 scss 文件，TypeScript 还需要一个 .d.ts 文件。

试试

declare module '*.module.scss'
const a:any
export default a

我会收到此错误 'typeof import("c:/spfx-HRLModalPopup/src/webparts/modalPopup/components/ModalPopup.module.scss")'.ts(2339) 类型上不存在属性 'custombutton'

可能是你的webpack通过ts loader加载module.scss文件。

                test: /\.(ts|js)x?$/,
                exclude: /(node_modules|bower_components)/,
                use: 
                    loader: 'babel-loader',

                
            

【讨论】：

我会收到这个错误Property 'custombutton' does not exist on type 'typeof import("c:/spfx-HRLModalPopup/src/webparts/modalPopup/components/ModalPopup.module.scss")'.ts(2339)

@johnGu 已更新。为模块化 scss 文件初始化 webpack 加载器，导入文件并在 tsx 中使用它，并为 scss 文件声明模块（最简单的方法是将它们定义为 any）。

所有这些都只是为了改变按钮的背景颜色？似乎很多工作..我是对的吗？

不，大部分工作在 webpack configure(webpack.config.js)。

好吧，我对 typescript 和 SPFx 有点陌生。所以在我的项目中我需要添加 src/webparts/webpack.config.js 吗？在components 文件夹内？

【参考方案2】：

有一种简单的方法可以更改颜色。您只需将其直接放入按钮中（注意 jsx 表示法，它是“backgroundColor”而不是“background-color”）

<DefaultButton style= backgroundColor: "red", color: "white"  ... />

SPFx 中的 CSS 不仅仅是“css”，SPFx 使用的是 scss 模块（以支持主题化）。请使用documentation 阅读这些模块是什么以及它们在 SPFx 中的工作原理。

不过，还有另一种简单的方法。要使您的代码按原样工作，您需要在 scss 文件中使用 :global 块。你可以像这样包装你的类：

:global 
  .custombutton
  
    background-color: #2488d8;
    color: white;
  

使用模块的默认方式是使用 styles.custombutton 而不是“custombutton”（在这种情况下，您不需要 scss 文件中的“global:”）。定义“styles.custombutton”是由构建工具为您自动生成的。像这样

<DefaultButton className=styles.custombutton ... />