Css 如何为typescript环境中材质ui按钮内呈现的链接呈现activeClassName样式？

我正在学习react，并尝试设置封装在材质ui按钮中的react路由器domNavLink的样式。我正在使用React with Typescript和自定义网页包构建

声明这可以通过设置activeClassName属性来实现

在下面的代码清单中，我尝试在包含NavLink组件的按钮上设置activeClassName

从“/navbar.css”导入*作为导航栏；
常量导航条链接=（）=>(
关于
);

突出显示的css类如下所示：

。突出显示{
边框底部：3倍实心rgb（17418528）；
}

但是，不会渲染底部边框。如何为Typescript环境中的材质ui按钮中呈现的react router domNavLink获取要呈现的activeClassName样式

我的构建环境配置如下

我已经为样式表创建了一个类型声明文件 并将其保存在tsconfig.json中引用的文件夹中

导出常量活动：字符串；
导出常量水平菜单：字符串；
导出常量突出显示：字符串；

我的tsconfig.json包含typesRoot配置。这将引用存储我的css类型声明文件的类型文件夹：

"typeRoots": ["node_modules/@types", "src/types"]

我的网页包开发配置是使用css加载器在src/app下捆绑css文件/*/

---

当我执行Webpack开发构建时，我可以看到NavBar.css内容被css加载程序拾取并作为字符串嵌入到捆绑文件中

您所拥有的应该可以使用，但您传递的是一个类名，而不是样式，因此我认为您只需要将

activeClassName

属性设置为“高亮显示”

关于

您还需要添加

！重要信息

用于设置样式，以便覆盖材质UI按钮的CSS

---

工作代码沙盒

非常感谢@bgaynor78。刚刚查看了codesandbox链接。这是非常有用的，给了我一些希望：）好吧，看来我差不多到了那里，走上了正确的轨道。。。但是，我使用的是带有typescript的自定义webpack构建，因此activeClassName属性的语法不同。我试着添加重要信息！和activeClassName=“高亮显示”，但仍无法按预期渲染。问题一定在我的构建环境中的某个地方。抱歉，将用构建环境更新问题…明白了，输入了一个重要的错误！而不是重要的。这就成功了@bgaynor78。非常感谢……接受回答：）

 {
        // link css modules
        test: /\.css$/,
        include: path.resolve(constants.dir.SRC, 'app'),
        use: [
          { loader: require.resolve('style-loader') },
          {
            loader: require.resolve('css-loader'),
            options: {
              modules: {
                localIdentName: '[path][name]__[local]___[hash:base64:5]',
              },
              importLoaders: 1,
              sourceMap: true,
            },
          },
        ],
      },
    ...

<Button
  color="inherit"
  component={NavLink}
  activeClassName="highlighted"
  to="/about"
 >
  About
</Button>