[英]Setting hovered style for material-ui IconButton
According to React Material-UI docs, I have a prop hoveredStyle
to work with: http://www.material-ui.com/#/components/icon-button 根据React Material-UI文档,我有一个支持hoveredStyle
的道具可以使用: http : //www.material-ui.com/#/components/icon-button
I want to use IconButton
for two purposes: 我想将IconButton
用于两个目的:
tooltip
prop for accessibility 利用其tooltip
道具实现可访问性 However, I don't want the cursor to change to a pointer when I hover (which is default behavior I believe), so I changed it like so. 但是,我不希望在悬停时将光标更改为指针(我相信这是默认行为),因此我将其更改为这样。
import DeleteIcon from 'material-ui/svg-icons/action/delete
const hoveredStyle = {
cursor: 'initial'
}
render() {
return (
<IconButton tooltip="Description here" hoveredStyle={hoveredStyle}>
<DeleteIcon />
</IconButton>
)
}
This works fine, except that the split millisecond that I enter hover mode on the icon, I still see the default hand pointer before it gets set to the normal mouse pointer. 效果很好,除了我在图标上进入悬停模式的毫秒间隔外,在将默认指针设置为普通鼠标指针之前,我仍然会看到它。 How do I approach this? 我该如何处理?
I just tested adding a cursor: default to the style of both IconButton and DeleteIcon and it seems to have the functionality you want. 我刚刚测试过添加一个光标:默认为IconButton和DeleteIcon的样式,它似乎具有您想要的功能。 (No pointer cursor on hover.) (悬停时没有指针光标。)
const noPointer = {cursor: 'default'};
return (
<div>
<IconButton tooltip="Description here" style={noPointer}>
<DeleteIcon style={noPointer} />
</IconButton>
</div>
);
Some notes for people stumbling upon this thread. 给人们绊脚石的一些注意事项。 If you are having a problem with hover styles for an icon if you are using Material-ui you might have forgot something. 如果您在使用Material-ui时对图标的悬停样式有疑问,则可能忘记了某些内容。
In my case I used a <KeyboardArrowLeft/>
and wrapped it in a <Tooltip/>
. 就我而言,我使用了<KeyboardArrowLeft/>
并将其包装在<Tooltip/>
。 I could not get hover styles in there at all including a simple hand "cursor". 我根本无法获得包括简单的“光标”在内的悬停样式。 I had to wrap the icon with <IconButton>
. 我必须用<IconButton>
包装图标。 It is in that element where you can pass styles. 您可以在该元素中传递样式。
While the example that was provided before as the "accepted answer" does solve the initial problem, it is not production level. 虽然之前提供的示例作为“可接受的答案”确实解决了最初的问题,但它不是生产水平。
If you are using reactjs you will need to import the following into your component, switch with your respective icon 如果您使用的是reactjs,则需要将以下内容导入到您的组件中,并使用相应的图标进行切换
import Tooltip from '@material-ui/core/Tooltip';
import IconButton from '@material-ui/core/IconButton';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
In the icon wrap as follows 在图标换行中,如下所示
<Tooltip title="">
<IconButton
aria-label=""
style={componentStyle.iconBack}
>
<KeyboardArrowLeft
style={componentStyle.eventHeadingBack}
onClick={}
/>
</IconButton>
</Tooltip>
Now you will need to style the component, name it however you want but ideally according to the components purpose. 现在,您将需要对组件进行样式设置,并根据需要命名,但最好根据组件的用途进行命名。
const componentStyle = {
container: {
display: 'flex',
width: '100%',
height: '100vh',
backgroundColor: '#212121',
},
iconBack: {
cursor: 'crosshair'
},
eventHeadingBack: {
color: '#fff',
marginRight: '16px'
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.