Css 在添加到materialize下拉列表的图标上修改按钮填充

我使用的是物化。 如果没有任何图标，按钮看起来正常，但是如果我添加如下图标：

{/* <!-- Dropdown Trigger --> */}
<a className='dropdown-trigger btn' href='#!' data-target='dropdown1'>Type<i className="large material-icons">arrow_drop_down</i></a>

{/**/}

填充受到影响，文本向下，请参见图片：

解决这个问题的方法是什么？另一方面，是否有任何方法可以查看或将代码具体化到项目中，以检查代码并检查css类的功能，从而纠正此类小问题或扩展某些功能？ 顺便说一下，我用的是react

谢谢

编辑：我尝试的：

<div className="row" style={{alignItems:'center'}}>
    <a className='dropdown-trigger btn' href='#!' data-target='dropdown1'>Type<i className="large material-icons">arrow_drop_down</i></a>
</div>

---

您可以尝试将Materialize helper

valign wrapper

div放在

a

标记下，如下所示：

{/* <!-- Dropdown Trigger --> */}
<a className='dropdown-trigger btn' href='#!' data-target='dropdown1'>Type<i className="large material-icons">arrow_drop_down</i></a>

如何使用物料

行

和

列

？使用标签

a

下的

行

，设置样式

对齐项目：居中

，然后将其他两个放在列中。谢谢您的评论。我不太了解你。我需要标签

a

中的

下拉触发器btn

类才能使下拉菜单正常工作。你的意思是插入

div

s？是的。插入

div

sI编辑了您的建议。请参阅带有内联react样式的更新答案。它不起作用。非常感谢你的建议，无论如何，我会在回答部分详细阐述我之前的解释。