# style

# hover

单个无限定的按钮样式，无法覆盖框架自身的样式

.antd-pro-pages-one-map-comp-device-filter-customBtn {
  ...;
}

1
2
3

如下，则会覆盖掉框架中的样式

.antd-pro-pages-one-map-comp-alarm-detail-funcBtn
  .antd-pro-pages-one-map-comp-alarm-detail-customBtn {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA1CAYAAADcWABTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE3NzZDMkYzQzI0RDExRUE5MkUyQThDOThCMkJDOUY5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE3NzZDMkY0QzI0RDExRUE5MkUyQThDOThCMkJDOUY5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTc3NkMyRjFDMjREMTFFQTkyRTJBOEM5OEIyQkM5RjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTc3NkMyRjJDMjREMTFFQTkyRTJBOEM5OEIyQkM5RjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4UZ/5rAAABHklEQVR42uzdMUrDYACG4SQ4ihRavIHoEaJzKR7JxQ4O4mmcrXRWj1DwCg61dS31i/xCj/ArzwNfm9Dt5yVkazvb7Zs4yx6yaXbSQD022TK7WXTNe5tgz3Pzlo2cDRVbZ/1RPu5LrC/ZXfbhbKjIJJtnV0OrwxP2s7wGXIuViqN9yr66g3dWsVKr3zaPO2fBXyJYBAuCBcEiWBAsCBbBgmBBsAgWBAuCRbAgWBAsggXBgmARLAgWBItgQbAgWAQLggXBIlgQLAgWwYJgQbAIFgQLgkWwIFgQLIIFwYJg+cfBbsr1xHFQqXH5/vk372W5uT34AWpxms3L9XM72+0vcvGajZwNFVtnl8MTdpX12WO2dS5UZlva7Bdds/oWYAAguSdA1B/6KgAAAABJRU5ErkJggg==)
    center no-repeat;
  background-size: 100%;
  color: #42eaec;
  border: none;
  height: 37px;
  font-size: 18px;
  width: 120px;
}

1
2
3
4
5
6
7
8
9
10
11

# 动态图片

back

/**
 * 根据设备告警类型，状态获取背景
 * @param {告警类型} status
 */
const findBackByStatus = (status) => {
  const backStyle = {
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center",
    height: "374px",
    width: "316px",
    marginTop: "1rem",
    cursor: "pointer",
    color: "#ffffff",
  };
  if (alarmType.fire === status) {
    return { ...backStyle, backgroundImage: `url("${fireBackPng}")` };
  }
  if (alarmType.fault === status || alarmType.danger === status) {
    return { ...backStyle, backgroundImage: `url("${normalBackPng}")` };
  }
  return { ...backStyle, backgroundImage: `url("${offlineBackPng}")` };
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div
  style={findBackByStatus(deviceData.lastStatus)}
  className={selectedDeviceId === deviceData.id ? styles.deviceTypeActive : styles.deviceType}
>

1
2
3
4

# 内联 style 不支持 important

back

加入 css 里面定义类如下

.bottom-60 {
  padding-bottom: 60px !important;
}

1
2
3

如果象下面这样定义 paddingBottom会被无视掉

<div
  className="bottom-60"
  style={{ marginTop: '-46px', paddingBottom: '0px !important' }}
>

1
2
3
4

要想让自定义的 paddingBottom 生效的方法如下

<div
  className="bottom-60"
  style={{ marginTop: '-46px' }}
  ref={(node) => {
    if (node) {
      node.style.setProperty('padding-bottom', '0px', 'important');
    }
  }}
>

1
2
3
4
5
6
7
8
9

# css module

尽量不要使用 less-loader 来处理 css 文件，在与 antd 一起使用时可能出现错误，单独写一条规则)，所以我们只能两个来处理 css 的 loader。

修改config文件

  cssLoaderOptions: {
    modules: true,
    getLocalIdent: (
      context: {
        resourcePath: string;
      },
      _: string,
      localName: string,
    ) => {
      // 新增不需要作模块化处理的文件
      if (
        context.resourcePath.includes('node_modules') ||
        context.resourcePath.includes('ant.design.pro.less') ||
        context.resourcePath.includes('global.less') ||
        context.resourcePath.includes('tailwind.css')
      ) {
        return localName;
      }

      const match = context.resourcePath.match(/src(.*)/);

      if (match && match[1]) {
        const antdProPath = match[1].replace('.less', '');
        const arr = slash(antdProPath)
          .split('/')
          .map((a: string) => a.replace(/([A-Z])/g, '-$1'))
          .map((a: string) => a.toLowerCase());
        return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
      }

      return localName;
    },
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33