Question

我目前正在尝试通过更改其形状，背景颜色和悬停颜色来在React中重新设置Fabric UI Button的样式。我设法更改了前两个，但是由于selectors属性似乎不起作用，因此在访问悬停颜色时仍然遇到麻烦。

我的代码如下：

import React, { Component, Props } from 'react';
import { PrimaryButton as FluentPrimaryButton, IButtonStyles, IStyle} from 'office-ui-fabric-react';

interface MyPrimaryButtonProps {
  label?: string
}

const MyPrimaryButton = ({label}: MyPrimaryButtonProps) => {

  const styles: IButtonStyles = {
    root: [
      {
        fontSize: '16px',
        background: '#525CA3 ',
        border: '1px solid #525CA3',
        borderRadius: '20px',
        padding: '0px 30px',
        height: '40px',
        selectors: {                     //  <--- 
          ':hover': {                    //  <--- this part doesn't work.
            backgroundColor: 'red'       //  <---
          },
        }
      }
    ]
  };

  return (
    <div>
      <FluentPrimaryButton styles={styles} text={label} />
    </div>
  );
};

export default MyPrimaryButton;

我得到了一个自定义按钮，但是悬停颜色仍然保持默认的蓝色，而不是切换为红色。

Answer 1

您可以将鼠标悬停在按钮上时更改其样式：

    // Create the NotificationChannel, but only on API 26+ because
    // the NotificationChannel class is new and not in the support library
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        CharSequence name = "channel_name";
        String description = "channel_description";
        int importance = NotificationManager.IMPORTANCE_DEFAULT;
        NotificationChannel channel = new NotificationChannel(default_notification_channel_id, name, importance);
        channel.setDescription(description);
        // Register the channel with the system; you can't change the importance
        // or other notification behaviors after this
        NotificationManager notificationManager = getSystemService(NotificationManager.class);
        notificationManager.createNotificationChannel(channel);
    }
    NotificationCompat.Builder builder = new NotificationCompat.Builder(this, default_notification_channel_id)
            .setSmallIcon(R.drawable.logo_mobile_main_btn)
            .setContentTitle("textTitle")
            .setContentText("textContent")
            .setStyle(new NotificationCompat.BigTextStyle().bigText("Much longer text that cannot fit one line.Much longer text that cannot fit one line.Much longer text that cannot fit one line."))
            .setPriority(NotificationCompat.PRIORITY_DEFAULT);

    NotificationManagerCompat notificationManager = NotificationManagerCompat.from(this);
    // notificationId is a unique int for each notification that you must define
    notificationManager.notify(( int ) System. currentTimeMillis () , builder.build());

如何在Fluent UI中更改PrimaryButton的悬停样式？

1 个答案: