如何在 typescript 环境中的 material-ui 按钮内渲染 react-router-dom NavLink 的 activeClassName 样式？

Question

我正在学习 react 并尝试设置 react-router-dom NavLink 封装在 ma​​terial-ui 中的样式 按钮。我正在使用带有 Typescript 和自定义 Webpack 构建的 React。

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

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

import * as navbar from './NavBar.css';

const NavBarLinks = () => (
  <>
    <Button
      color="inherit"
      component={NavLink}
      activeClassName={navbar.highlighted}
      to="/about"
    >
      About
    </Button>
  </>
);

高亮的css类如下：

.highlighted {
  border-bottom: 3px solid rgb(174, 185, 28);
}

但是，没有渲染底部边框。如何获得 activeClassName 样式以呈现 react-router-dom NavLink 在 ma​​terial-ui中呈现> Button 在 Typescript 环境中？

我的构建环境配置如下。

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

export const active: string;
export const horizmenu: string;
export const highlighted: string;

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

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

我的 webpack 开发配置是使用 css-loader 来打包 src/app/*/

下的 css 文件

 {
        // 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,
            },
          },
        ],
      },
    ...

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

Answer 1

你所拥有的应该可以工作，但是你传递的是一个类名，而不是一个样式，所以我认为你只需要让你的 activeClassName 属性等于“highlighted”。

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

您还需要将 !important 添加到您的样式中，以便它覆盖 Material UI 按钮的 CSS。

工作代码框link