春暖花又开

想要global覆盖样式：app/pages/components/AntdCustomStyle/index.module.css Unknown word？

想要覆盖antd的默认样式， // AntdCustomStyle/index.module.css :global( .ant-tabs-tab { background-color: red; } ) // AntdCustomStyle/index.tsx import React, { useState } from 'react' import {Tabs} from 'antd' import './index.module.css' const initialItems = [ { label: 'Tab 1', children: 'Content of Tab 1', key: '1' }, { label: 'Tab 2', children: 'Content of Tab 2', key: '2' }, { label: 'Tab 3', children: 'Content of Tab 3', key: '3', closable: false, }, ]; function index() { const [items, setItems] = useState(initialItems); return ( ) } export default index 但是却报错如下： ./pages/components/AntdCustomStyle/index.module.css:3:3 Syntax error: /Users/john/Desktop/Test/js/typescript/ts-test01/my-app/pages/components/AntdCustomStyle/index.module.css Unknown word 1 | 2 | :global( > 3 | .ant-tabs-tab { | ^ 4 | background-color: red; 5 | } "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250105/983393a4ab9dca85d93fa3bc9f24ad04.png) 请问这是哪里有问题啊，应该就是这样写的？ *** 编辑1 感谢：然后去远足的回复。但是我这样做之后还是报错： :global(.ant-tabs-tab ){ background-color: red; } 或者 .myClass { :global(.ant-tabs-tab ){ background-color: red; } } "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250105/7a204d535091b852023a3068a53da58d.png)

我爱上班

css中多行省略号不生效的问题?

为什么全是字母多行省略不生效 .item { width: 100px; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } abcdefghijhlmnljjasufoqwhfesadhfjasdflasdjfalsfjla;skdnfvkasldjlsafpwqeuriwehfklsdahvjsahdf "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250105/5047e0528e38bd4da79de6508feb82c4.png) 文字多行省略生效 .item { width: 100px; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } 哈哈哈哈哈哈哈哈哈哈哈哈哈红红火火恍恍惚惚 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250105/8b8229a2e4b65c15c7af24631b677c3c.png)

sssssjkl

unocss 如何配置针对某个 dataset 的元素生效样式？

unocss 配置 "prefix" 后 className 显得有点长了，我希望只加一个 "data-uno" 来让 unocss 生效，而不是每个 className 都添加前缀。 请问有办法做到这种效果吗？ 不生效： 生效：

codbad

TS 如何约束一个对象为 CSS 属性？

function setAttrsToElement(el: HTMLElement, attr: Record) { for (const key in attr) { el.setAttribute(key, attr[key]) } } 1. 第一个参数是一个element 类型。 2. 第二个参数我想约束为 css 属性。 这个函数接收两个参数，这个函数会遍历第二个参数的 key value 附加给 el 作为属性。 想达到的目的： 在调用这个函数时，代码可以提示自动补全出属性值。 问题补充，在 ts 4.6.4 下 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241225/c7a9a99cec05db090f7b1a1862613bfc.png)

饼干爱折腾

前端 不规则进度条，求好的思路？

"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250108/67b17e94dbc4844548d6ef884ca2ea67.png) 这是一个水塔的svg，需求： 水面跟随进度上升下降 进度低于20时变红色，其余进度变绿色 整体尺寸不是固定的，跟随父布局大小 思路1：目前我的思路是根据进度，切10张水塔图，根据进度动态显示。但这增加包体积，感觉也有点粗暴。 思路2：用两张图上下放置，上面的水塔用clip-path根据进度切，但好像只能且固定大小，因为svg的path好像是固定的 目前没有更好的解决思路，各位大佬怎么看？

萌蒙萌

js打印，window.print如何自定义页眉页脚？

浏览器打印，可以自定义页眉页脚吗？ "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241221/760e01ede6e15bfa7865ecc034a0755b.png)

明道

为什么这个项目页面中的a标签必须要设置宽度 a中的img才会展示？

"https://stackblitz.com/edit/web-platform-njj5ut?file=index.html" (https://link.segmentfault.com/?enc=kgc8eUBZrvLmWExqJ3TLDA%3D%3D.zsx4Ozxo7zRbagjmzeXg7lE1oJjVd84MyhKgZ0q43KyBxIb%2BLs6fqc63qSh4ohT30oTfQGJ7KoIiTaV0zR%2Bc%2FQ%3D%3D) 求答疑

九久九

这个内嵌的CSS样式，实际审查元素这个CSS样式是空的，这是怎么实现的？

https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250113/2e84cb9e626974a9b12c8e2ae871ef20.png https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250113/8fde3d7cdfd4d7a531ddf1b1032858b1.png "https://elements.envato.com/sign-in" (https://link.segmentfault.com/?enc=ozTg0YsFTYEUy7SdSYqT0g%3D%3D.3YwLmZSw2iB3BB2mKBJOhhmVZ9MBaiL8jcZrCoBhPD07N7FP6kQxoW9nf4WLPjxC) 当你查看这个CSS的时候，"" 里面是什么页面，这怎么实现是，哪里能找到这个CSS文件

脑洞大咖

五子棋机器人,简化代码?

我花了几天的时间用vue写了一个五子棋，与机器人对战 但是我感觉里面代码很多重复的部分，想要简化写法，希望大家帮我看看 五子棋 机器人小福正持黑棋与您作战 人机对战 {{ tip }} 重新开始 import { ref } from 'vue' import dialogVue from '../comm/dialog.vue' export default { components: { dialogVue }, setup() { //机器人玩五子棋的思路是 //当用户有三个连在一起时，挡住一边，有四个时，阻挡用户，其他情况机器人自己企图完成五个连线 const isMachine = ref(false)//是否是机器人对战 const score = ref(0) const row = ref(20) const col = ref(20) const visible = ref(false) const tip = ref('') const boxs = ref([[{ place: 0, x: 0, y: 0 }]]) const curUser = ref(1)//只可以是1或者2 1表示白 2表示黑 let airPlace = []//记录机器人下棋子的地方 let previousBox = { place: 0, x: 0, y: 0 } let fourDetial = {}//机器人是否有四个连在一起 function init() { curUser.value = 1 visible.value = false airPlace = [] boxs.value = [] previousBox = { place: 0, x: 0, y: 0 } fourDetial = {} for (let i = 0; i fourDetial.x - fourDetial.times + 1; i--) { if (boxs.value[i][fourDetial.y].place === 0) { boxs.value[i][fourDetial.y].place = 2 fourDetial = determineEquare3(4, 2, { x: i, y: fourDetial.y, place: 2 }) airPlace.push((i) * row.value + fourDetial.y) curUser.value = 1 return } } } else if (boxs.value[fourDetial.x + 1]?.[fourDetial.y]?.place === 0) { boxs.value[fourDetial.x + 1][fourDetial.y].place = 2 fourDetial = determineEquare3(4, 2, { x: fourDetial.x + 1, y: fourDetial.y, place: 2 }) airPlace.push((fourDetial.x + 1) * row.value + fourDetial.y) curUser.value = 1 return } else if (boxs.value[fourDetial.x - fourDetial.times]?.[fourDetial.y]?.place === 0) { boxs.value[fourDetial.x - fourDetial.times][fourDetial.y].place = 2 fourDetial = determineEquare3(4, 2, { x: fourDetial.x - fourDetial.times, y: fourDetial.y, place: 2 }) airPlace.push((fourDetial.x - fourDetial.times) * row.value + fourDetial.y) curUser.value = 1 return } } else if (fourDetial.type === 2) { if (fourDetial.geyi) { for (let j = fourDetial.y; j > fourDetial.y - fourDetial.times + 1; j--) { if (boxs.value[fourDetial.x][j].place === 0) { boxs.value[fourDetial.x][j].place = 2 fourDetial = determineEquare3(4, 2, { x: fourDetial.x, y: j, place: 2 }) airPlace.push((fourDetial.x) * row.value + j) curUser.value = 1 return } } } else if (boxs.value[fourDetial.x]?.[fourDetial.y + 1]?.place === 0) { boxs.value[fourDetial.x][fourDetial.y + 1].place = 2 fourDetial = determineEquare3(4, 2, { x: fourDetial.x, y: fourDetial.y + 1, place: 2 }) airPlace.push((fourDetial.x) * row.value + fourDetial.y + 1) curUser.value = 1 return } else if (boxs.value[fourDetial.x]?.[fourDetial.y - fourDetial.times]?.place === 0) { boxs.value[fourDetial.x][fourDetial.y - fourDetial.times].place = 2 fourDetial = determineEquare3(4, 2, { x: fourDetial.x, y: fourDetial.y - fourDetial.times, place: 2 }) airPlace.push((fourDetial.x) * row.value + fourDetial.y - fourDetial.times) curUser.value = 1 return } } else if (fourDetial.type === 3) { if (fourDetial.geyi) { let i for (let j = fourDetial.y - 1; j > fourDetial.y - fourDetial.times + 1; j--) { i = fourDetial.x - (fourDetial.y - j) if (boxs.value[i]?.[j]?.place === 0) { boxs.value[i][j].place = 2 fourDetial = determineEquare3(4, 2, { x: i, y: j, place: 2 }) airPlace.push((i) * row.value + j) curUser.value = 1 return } } } else if (boxs.value[fourDetial.x + 1]?.[fourDetial.y + 1]?.place === 0) { boxs.value[fourDetial.x + 1][fourDetial.y + 1].place = 2 fourDetial = determineEquare3(4, 2, { x: fourDetial.x + 1, y: fourDetial.y + 1, place: 2 }) airPlace.push((fourDetial.x + 1) * row.value + fourDetial.y + 1) curUser.value = 1 return } else if (boxs.value[fourDetial.x - fourDetial.times]?.[fourDetial.y - fourDetial.times]?.place === 0) { boxs.value[fourDetial.x - fourDetial.times][fourDetial.y - fourDetial.times].place = 2 fourDetial = determineEquare3(4, 2, { x: fourDetial.x - fourDetial.times, y: fourDetial.y - fourDetial.times, place: 2 }) airPlace.push((fourDetial.x - fourDetial.times) * row.value + fourDetial.y - fourDetial.times) curUser.value = 1 return } } else if (fourDetial.type === 4) { if (fourDetial.geyi) { let i for (let j = fourDetial.y; j temp.x - temp.times + 1; i--) { if (boxs.value[i][temp.y].place === 0) { boxs.value[i][temp.y].place = 2 fourDetial = determineEquare3(4, 2, { x: i, y: temp.y, place: 2 }) airPlace.push((i) * row.value + temp.y) } } } else if (boxs.value[temp.x + 1]?.[temp.y]?.place === 0) { boxs.value[temp.x + 1][temp.y].place = 2 fourDetial = determineEquare3(4, 2, { x: temp.x + 1, y: temp.y, place: 2 }) airPlace.push((temp.x + 1) * row.value + temp.y) } else if (boxs.value[temp.x - temp.times]?.[temp.y]?.place === 0) { boxs.value[temp.x - temp.times][temp.y].place = 2 fourDetial = determineEquare3(4, 2, { x: temp.x - temp.times, y: temp.y, place: 2 }) airPlace.push((temp.x - temp.times) * row.value + temp.y) } } else if (temp.type === 2) { if (temp.geyi) { for (let j = temp.y; j > temp.y - temp.times + 1; j--) { if (boxs.value[temp.x][j].place === 0) { boxs.value[temp.x][j].place = 2 fourDetial = determineEquare3(4, 2, { x: temp.x, y: j, place: 2 }) airPlace.push((temp.x) * row.value + j) } } } else if (boxs.value[temp.x]?.[temp.y + 1]?.place === 0) { boxs.value[temp.x][temp.y + 1].place = 2 fourDetial = determineEquare3(4, 2, { x: temp.x, y: temp.y + 1, place: 2 }) airPlace.push((temp.x) * row.value + temp.y + 1) } else if (boxs.value[temp.x]?.[temp.y - temp.times]?.place === 0) { boxs.value[temp.x][temp.y - temp.times].place = 2 fourDetial = determineEquare3(4, 2, { x: temp.x, y: temp.y - temp.times, place: 2 }) airPlace.push((temp.x) * row.value + temp.y - temp.times) } } else if (temp.type === 3) { if (temp.geyi) { let i for (let j = temp.y - 1; j > temp.y - temp.times + 1; j--) { i = temp.x - (temp.y - j) if (boxs.value[i]?.[j]?.place === 0) { boxs.value[i][j].place = 2 fourDetial = determineEquare3(4, 2, { x: i, y: j, place: 2 }) airPlace.push((i) * row.value + j) } } } else if (boxs.value[temp.x + 1]?.[temp.y + 1]?.place === 0) { boxs.value[temp.x + 1][temp.y + 1].place = 2 fourDetial = determineEquare3(4, 2, { x: temp.x + 1, y: temp.y + 1, place: 2 }) airPlace.push((temp.x + 1) * row.value + temp.y + 1) } else if (boxs.value[temp.x - temp.times]?.[temp.y - temp.times]?.place === 0) { boxs.value[temp.x - temp.times][temp.y - temp.times].place = 2 fourDetial = determineEquare3(4, 2, { x: temp.x - temp.times, y: temp.y - temp.times, place: 2 }) airPlace.push((temp.x - temp.times) * row.value + temp.y - temp.times) } } else if (temp.type === 4) { if (temp.geyi) { let i for (let j = temp.y; j 0) { boxs.value[previousBox.x - 1][previousBox.y].place = 2 airPlace.push((previousBox.x - 1) * row.value + previousBox.y) } else { boxs.value[previousBox.x + 1][previousBox.y].place = 2 airPlace.push((previousBox.x + 1) * row.value + previousBox.y) } } else { let time = [{ time: 0, pre: -1, geyi: false }, { time: 0, pre: -1, geyi: false }, { time: 0, pre: -1, geyi: false }, { time: 0, pre: -1, geyi: false }] airPlace.some((item, index, arr) => { let itemi = Math.floor(item / row.value) let itemj = item % row.value if (time[0].time = 4) { if ((boxs.value[itemi][itemj + 1]?.place === 0 && boxs.value[itemi][itemj + 1]) || (boxs.value[itemi][itemj - time[0].times]?.place === 0 && boxs.value[itemi][itemj - time[0].time])) return true else { //虽然有四个横着，但是这四个横着两边都被挡住了，所以重新再来 time[0] = { time: 0, pre: -1, geyi: false } } } } } if (time[1].pre === -1 || arr[time[1].pre] === item - 1 || (arr[time[1].pre] === item - 2 && !time[1].geyi)) { if (arr[time[1].pre] === item - 2) { if (boxs.value[Math.floor((item - 1) / row.value)][(item - 1) % row.value].place === 0) { time[0].geyi = true } else { return false } } if ((arr[time[1].pre] === item - 1 || arr[time[1].pre] === item - 2) && time[1].time === 0) { time[1].time = 0 time[1].geyi = false } else time[1].time++ if (time[1].time > 3) { time[1].time = 0 } time[1].pre = index } if (time[2].pre === -1 || arr[time[2].pre] === item - 1 || (arr[time[2].pre] === item - 2 && !time[2].geyi)) { if (arr[time[2].pre] === item - 2) { if (boxs.value[Math.floor((item - 1) / row.value)][(item - 1) % row.value].place === 0) { time[0].geyi = true } else { return false } } if ((arr[time[2].pre] === item - 1 || arr[time[2].pre] === item - 1) && time[2].time === 0) { time[2].time = 0 time[2].geyi = false } else time[2].time++ if (time[2].time > 2) { time[2].time = 0 } time[2].pre = index } if (time[3].pre === -1 || arr[time[3].pre] === item - 1 || (arr[time[3].pre] === item - 2 && !time[3].geyi)) { if (arr[time[3].pre] === item - 2) { if (boxs.value[Math.floor((item - 1) / row.value)][(item - 1) % row.value].place === 0) { time[0].geyi = true } else { return false } } if ((arr[time[3].pre] === item - 1 || arr[time[3].pre] === item - 1) && time[3].time === 0) { time[3].time = 0 time[3].geyi = false } else time[3].time++ if (time[3].time > 1) { time[3].time = 0 } time[3].pre = index } }) time = time.sort((a, b) => b.time - a.time) let placeHas = time.some(item => { if (item.time > 0 && item.pre > -1) { const i = Math.floor(airPlace[item.pre] / row.value) const j = Math.floor(airPlace[item.pre] % row.value) if (boxs.value[i][j + 1]?.place === 0) { boxs.value[i][j + 1].place = 2 airPlace.push(i * row.value + j + 1) fourDetial = determineEquare3(4, 2, { x: i, y: j + 1, place: 2 }) return true } if (boxs.value[i][j - item.time]?.place === 0) { boxs.value[i][j - item.time].place = 2 airPlace.push(i * row.value + j - item.time) fourDetial = determineEquare3(4, 2, { x: i, y: j - item.time, place: 2 }) return true } } }) if (placeHas) { airPlace = airPlace.sort((a, b) => a - b) return } time = [{ time: 0, pre: -1, index: -1 }, { time: 0, pre: -1, index: -1 }, { time: 0, pre: -1, index: -1 }, { time: 0, pre: -1, index: -1 }] airPlace.some((item, index) => { let itemi = Math.floor(item / row.value) let itemj = item % row.value if (time[0].time = 4) { if ((boxs.value[itemi + 1][itemj]?.place === 0 && boxs.value[itemi + 1][itemj]) || (boxs.value[itemi - time[0].time][itemj]?.place === 0 && boxs.value[itemi - time[0].time][itemj])) return true else { //虽然有四个竖着，但是这四个竖着两边都被挡住了，所以重新再来 time[0] = { time: 0, pre: -1 } } } } } if (time[1].pre === -1 || time[1].pre === item - row.value) { if (time[1].pre === item - row.value && time[1].time === 0) { time[1].time = 0 } else time[1].time++ if (time[1].time > 3) { time[1].time = 0 } time[1].pre = item time[1].index = index } if (time[2].pre === -1 || time[2].pre === item - row.value) { if (time[2].pre === item - row.value && time[2].time === 0) { time[2].time = 0 } else time[2].time++ if (time[2].time > 2) { time[2].time = 0 } time[2].pre = item time[2].index = index } if (time[3].pre === -1 || time[3].pre === item - row.value) { if (time[3].pre === item - row.value && time[3].time === 0) { time[3].time = 0 } else time[3].time++ if (time[3].time > 1) { time[3].time = 0 } time[3].pre = item time[3].index = index } }) time = time.sort((a, b) => b.time - a.time) placeHas = time.some(item => { if (item.time > 0 && item.pre > -1) { const i = Math.floor(item.pre / row.value) const j = Math.floor(item.pre % row.value) if (boxs.value[i + 1]?.[j]?.place === 0) { boxs.value[i + 1][j].place = 2 airPlace.push((i + 1) * row.value + j) fourDetial = determineEquare3(4, 2, { x: i + 1, y: j, place: 2 }) return true } if (boxs.value[i - item.time]?.[j]?.place === 0) { boxs.value[i - item.time][j].place = 2 airPlace.push((i - item.time) * row.value + j) fourDetial = determineEquare3(4, 2, { x: i - item.time, y: j, place: 2 }) return true } } }) if (placeHas) { airPlace = airPlace.sort((a, b) => a - b) return } } } //判断用户是否有横竖斜大于等于3个棋子的情况，只需要查看用户上一个棋子落下后是否造成这样的情况就行 function determineEquare3(maxTime = 3, userPlace = 1, box = previousBox) { let times = 0 let preP = -1 let geyi = false let tempArr = [] //竖 for (let i = (box.x - 5 >= 0 ? box.x - 5 : 0); i = maxTime) { if (times === 3 && geyi) { continue } if (boxs.value[i + 1]?.[box.y].place !== 0 && boxs.value[i + 1]?.[box.y].place !== userPlace && boxs.value[i - times]?.[box.y].place !== 0) { break } else { tempArr[0] = tempArr[0]?.times > times ? tempArr[0] : { x: i, y: box.y, type: 1, times, geyi } if (boxs.value[i + 1]?.[box.y].place !== 0 || boxs.value[i - times]?.[box.y].place !== 0) { tempArr[0].priority = 2 } else { tempArr[0].priority = 1 } } } } } times = 0 preP = -1 geyi = false //横 for (let j = (box.y - 5 >= 0 ? box.y - 5 : 0); j = maxTime) { if (times === 3 && geyi) { continue } if (boxs.value[box.x]?.[j + 1]?.place !== 0 && boxs.value[box.x]?.[j + 1].place !== userPlace && boxs.value[box.x]?.[j - times]?.place !== 0) { break } else { tempArr[1] = tempArr[1]?.times > times ? tempArr[1] : { x: box.x, y: j, type: 2, times, geyi } if (boxs.value[box.x]?.[j + 1]?.place !== 0 || boxs.value[box.x]?.[j - times]?.place !== 0) { tempArr[1].priority = 2 } else { tempArr[1].priority = 1 } } } } } times = 0 preP = -1 geyi = false //左斜 let i let j if (box.x - 5 >= 0 && box.y - 5 >= 0) { i = box.x - 5 j = box.y - 5 } else if (box.x - 5 >= 0 && box.y - 5 = 0) { i = 0 j = box.y - (box.x - i) } else { if (box.x > box.y) { j = 0 i = box.x - (box.y - j) } else { i = 0 j = box.y - (box.x - i) } } for (j; j = maxTime) { if (times === 3 && geyi) { i++ continue } if (boxs.value[i + 1]?.[j + 1]?.place !== 0 && boxs.value[i + 1]?.[j + 1].place !== userPlace && boxs.value[i - times]?.[j - times]?.place !== 0) { break } else { tempArr[2] = tempArr[2]?.times > times ? tempArr[2] : { x: i, y: j, type: 3, times, geyi } if (boxs.value[i + 1]?.[j + 1]?.place !== 0 || boxs.value[i - times]?.[j - times]?.place !== 0) { tempArr[2].priority = 2 } else { tempArr[2].priority = 1 } } } } i++ } //右斜 if (box.x - 5 >= 0 && box.y + 5 = 0 && box.y + 5 >= row.value) { j = row.value - 1 i = box.x - (row.value - 1 - box.y) } else if (box.x - 5 row.value - 1 - box.y) { j = row.value - 1 i = box.x - (row.value - 1 - box.y) } else { i = 0 j = box.y + (box.x - i) } } preP = -1 times = 0 geyi = false for (j; j > (box.y - 5 >= 0 ? box.y - 5 : 0); j--) { console.log(times, preP, geyi, tempArr[0], i, j, box, 'times,preP,geyi,tempArr[0],i,j,box,右斜') if (boxs.value[i]?.[j]?.place === userPlace) { if (preP === -1 || preP === j + 1 || (preP === j + 2 && !geyi)) { if (preP === j + 2) { if (boxs.value[i - 1][j + 1]?.place === 0) { geyi = true times++ } else { continue } } times++ } else { times = 1 geyi = false } preP = j if (times >= maxTime) { if (times === 3 && geyi) { i++ continue } if (boxs.value[i + 1]?.[j - 1]?.place !== 0 && boxs.value[box.x]?.[j - 1].place !== userPlace && boxs.value[i - times]?.[j + times]?.place !== 0) { break } else { tempArr[3] = tempArr[3]?.times > times ? tempArr[3] : { x: i, y: j, type: 4, times, geyi } if (boxs.value[i + 1]?.[j - 1]?.place !== 0 || boxs.value[i - times]?.[j + times]?.place !== 0) { tempArr[3].priority = 2 } else { tempArr[3].priority = 1 } } } } i++ } console.log(tempArr, 'temp') tempArr = tempArr.sort((a, b) => b.times - a.times) if (tempArr[0]?.times >= 3) { if (tempArr[0].priority === 2) { let temp = null tempArr.map((item, index, arr) => { if (item?.times >= arr[0].times) { if (item.priority === 1) { temp = item } } }) if (temp) { return temp } //挡住一边的三个没有必要去阻挡 if (tempArr[0]?.times === 3) { return false } } return tempArr[0] } return false } //验证是否赢了 function validateWin() { if(visible.value) return for (let i = 0; i .mineDlearance { display: flex; justify-content: center; width: 100%; height: 100%; // align-items: center; .game { // background: #ccc; padding: 10px; height: 850px; .top { display: flex; justify-content: space-between; } .game-main { margin-top: 10px; .item-one { width: 40px; height: 40px; border: 1px solid #000; box-sizing: border-box; background: goldenrod; cursor: pointer; .circle { width: 100%; height: 100%; border-radius: 100%; } } } } }

CO_co

请问要如何才能对一个antd组件的多个class做样式修改呢，使用多className覆盖不能做到？

现在有一个需求，就是对antd的Collapse做一个样式的修改，去掉border-radius： // TestComp/index.tsx import type { CollapseProps } from 'antd'; import { Collapse, Button } from 'antd'; import styles from './index.module.css' const text = ` A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world. `; const items: CollapseProps['items'] = [ { key: '1', label: This is panel header 1, children: {text}, }, { key: '2', label: 'This is panel header 2', children: {text}, }, { key: '3', label: 'This is panel header 3', children: {text}, }, ]; const TestComp: React.FC = () => { const onChange = (key: string | string[]) => { console.log(key); }; return ; }; export default TestComp; css代码如下： // TestComp/index.module.tsx .myCollapse:global(.ant-collapse) { border-radius: 0px !important; } /* .myCollapse2:global(.ant-collapse-item:last-child) { border-radius: 0px !important; } */ 效果： 我们可以看到顶部左右是已经去除，但是下面的最后一个item没有去除： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241231/4ccfe00c4fe605291081e895758a9e6c.png) 所以我进一步想要对".ant-collapse-item:last-child" 做修改： // TestComp/index.module.tsx .myCollapse:global(.ant-collapse) { border-radius: 0px !important; } .myCollapse2:global(.ant-collapse-item:last-child) { border-radius: 0px !important; } // tsx ; 但是不生效： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241231/83bc816506f5a01459727be06c4bf7d5.png) === 请问要如何才能对一个antd组件的多个class做样式修改呢？ === 编辑-01 代码如下： "https://codesandbox.io/s/ynk3tr" (https://link.segmentfault.com/?enc=9MBtT68dacU8t3KV8CXDYA%3D%3D.3K7pENa0JsmYnVgSfyxDPGH%2BKt79DM36TItlN0SCxWc%3D)