在 React 中自定义标签外观 RadioGroup答案

【问题标题】：Customising label appearance RadioGroup in React在 React 中自定义标签外观 RadioGroup
【发布时间】：2020-11-23 13:17:39
【问题描述】：

我正在使用 material-ui RadioGroup。各个标签是动态分配的。在父组件中，我设置 width='50px'。问题是当标签长度超过 50 像素时，整个组件的宽度就会拉伸。我想防止这种情况并截断或剪辑标签并为工具提示提供完整的标签值。如何在下面的代码中做到这一点？：

const useStyles = makeStyles({
  root: {
    '&:hover': {
      backgroundColor: 'transparent',
    },
  },
  icon: {
    borderRadius: '50%',
    width: 16,
    height: 16,
    boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
    backgroundColor: '#f5f8fa',
    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
    '$root.Mui-focusVisible &': {
      outline: '2px auto rgba(19,124,189,.6)',
      outlineOffset: 2,
    },
    'input:hover ~ &': {
      backgroundColor: '#ebf1f5',
    },
    'input:disabled ~ &': {
      boxShadow: 'none',
      background: 'rgba(206,217,224,.5)',
    },
  },
  checkedIcon: {
    backgroundColor: '#137cbd',
    backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
    '&:before': {
      display: 'block',
      width: 16,
      height: 16,
      backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)',
      content: '""',
    },
    'input:hover ~ &': {
      backgroundColor: '#106ba3',
    },
  },
});

// Inspired by blueprintjs
function StyledRadio(props) {
  const classes = useStyles();

  return (
    <Radio
      className={classes.root}
      disableRipple
      color="default"
      checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}
      icon={<span className={classes.icon} />}
      {...props}
    />
  );
}

export default function CustomizedRadios(props) {
  
    const onChange = (event) => {
      console.log(event.target.value)
        props.onChange(event.target.value)
    }
    
  return (
    <FormControl component="fieldset">
      <FormLabel component="legend"></FormLabel>
      <RadioGroup defaultValue={props.currentBookmark} aria-label="gender" name="customized-radios" onChange={onChange}>
          {props.bookmarkList.map(function (bookmark, index)  {return (<FormControlLabel key={index} value={bookmark.name} checked={(bookmark.name == props.currentBookmark)? true:false} editable={1} control={<StyledRadio />} label={bookmark.name} /> )})}
      </RadioGroup>
    </FormControl>
  );
}

【问题讨论】：

标签： reactjs material-ui radio-group

【解决方案1】：

在等待建议的同时玩耍后，我想出了这种方法。我直接在组件上应用样式格式 - 裁剪我使用溢出属性和空白“nowrap”的文本。此外，通过使用工具提示，我在将鼠标悬停在收音机上时保持完整标签的可见性。下面是一段代码：

return (
    <FormControl style={{"float": 'left'}} component="fieldset">
      <FormLabel style={{"float": 'left'}} component="legend"></FormLabel>
      <RadioGroup style={{"float": 'left'}} defaultValue={props.currentBookmark} aria-label="gender" name="customized-radios" onChange={onChange}>
          {props.bookmarkList.map(function (bookmark, index)  {return (<Tooltip title={bookmark.name} placement="left"><FormControlLabel key={index} value={bookmark.name} checked={(bookmark.name == props.currentBookmark)? true:false} editable={1} style={{ "font-family": 'Calibri, sans-serif', "white-space": 'nowrap', float: "left", width:'90px', paddingLeft: "6px", paddingBottom:"0px",paddingTop:"0px", border: "0px", marginBottom: "0px", overflow:'crop'}} control={<StyledRadio />} label={<span style={{"font-family": 'Calibri, sans-serif'}}>{bookmark.name}</span>} /></Tooltip> )})}
      </RadioGroup>
    </FormControl>
  );

【讨论】：