改KendoReactUI组件,实现多个子元素的样式不一样

菜鸟小佳

已于 2023-06-13 11:52:29 修改

阅读量524

点赞数

文章标签： javascript ecmascript typescript 前端 kendoReact

于 2023-06-13 11:50:45 首次发布

本文链接：https://blog.csdn.net/weixin_42429288/article/details/131185307

版权

文章讲述了在使用KendoReactRadioButton组件时，如何通过JavaScript动态控制选中项的样式，特别是颜色。通过检查checked状态，设置不同的borderColor和backgroundColor，实现不同严重级别显示不同颜色的效果。

摘要由CSDN通过智能技术生成

before

after

问题描述
使用KendoReact RadioButton 组件，当用户选中当前项时需要显示不同颜色，试图通过找到KendoUI中对应的class name，然后修改这个class name下面的css来达到目的，但不起作用
解决办法
用js控制style

核心代码

    const blueColor = "#268bdc";
    const orangeColor = "#f99506";
    const redColor = "#e12219";

    const arr = [
      {
        name: "severityList",
        displayedValue: info,
        value: Severity.Information,
        checked: severity === Severity.Information,
        style: (checked = false) => (checked ? {borderColor: blueColor, backgroundColor: blueColor} : undefined),
        id: v4(),
      },
      {
        name: "severityList",
        displayedValue: minor,
        value: Severity.Minor,
        checked: severity === Severity.Minor,
        style: (checked = false) => (checked ? {borderColor: orangeColor, backgroundColor: orangeColor} : undefined),
        id: v4(),
      },
      {
        name: "severityList",
        displayedValue: major,
        value: Severity.Major,
        checked: severity === Severity.Major,
        style: (checked = false) => (checked ? {borderColor: redColor, backgroundColor: redColor} : undefined),
        id: v4(),
      },
    ];

    return arr.map((e) => (
      <RadioButton
        key={e.id}
        name={e.name}
        value={e.displayedValue}
        checked={e.checked}
        label={e.displayedValue}
        style={e.style(e.checked) as React.CSSProperties | undefined}
        onChange={(e) => {
          // do something
        }}
      />
    ));

分析