Question

我正在尝试使用复选框来允许多次选择用户的输入。我需要将图标放大到48px，但是，纹波和可点击区域位于左上角。我希望它在FontIcon的中心。有没有一个想法？

的CSS：

const styles = {
  mediumIcon: {
    fontSize: 48,
  },
}

Componets：

    <Checkbox
      checkedIcon={<FontIcon className="material-icons" >face</FontIcon>}
      uncheckedIcon={<FontIcon className="material-icons" >face</FontIcon>}          
      iconStyle={styles.mediumIcon}
    />

包版本：

"material-ui": "^0.16.6",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-tap-event-plugin": "^2.0.1",

这是生成的html：

<div style="cursor: pointer; position: relative; overflow: visible; display: table; height: auto; width: 100%;">
<!-- react-empty: 124 -->
<input type="checkbox" value="on" style="z-index: 2; position: absolute; pointer-events: all; opacity: 0; width: 100%; height: 100%; cursor: inherit; left: 0px; box-sizing: border-box; padding: 0px; margin: 0px;">
<div style="display: flex; width: 100%; height: 100%;">
    <div style="width: 24px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; position: relative; display: block; flex-shrink: 0; float: left; margin-right: 16px; margin-left: 0px; height: 24px; font-size: 48px;">
        <div>
            <span class="material-icons" style="user-select: none; color: rgba(0, 0, 0, 0.870588); position: absolute; font-size: 48px; display: inline-block; transition: opacity 650ms cubic-bezier(0.23, 1, 0.32, 1) 150ms; opacity: 0; fill: rgb(0, 188, 212);">face</span>
            <span class="material-icons" style="user-select: none; color: rgba(0, 0, 0, 0.870588); font-size: 48px; display: inline-block; transition: opacity 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, transform 800ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; position: absolute; transform: scale(1); fill: rgb(0, 188, 212); opacity: 1;">face</span>
        </div>
        <div>
            <span style="height: 200%; width: 200%; position: absolute; top: -12px; left: -12px; overflow: hidden; pointer-events: none; color: rgb(0, 188, 212);"></span>
        </div>
        <div style="position: absolute; overflow: hidden; height: 100%; width: 100%; top: 0px; left: 0px;"></div>
    </div>
</div>

材质UI - 当字体大小增加时，FontIcon和Checkbox纹波不对齐

0 个答案: