css - 如何在 typescript 环境中为在 material-ui 按钮内呈现的 react-router-dom NavLink 呈现 activeClassName 样式？

Question

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

documentation指出这可以通过设置 activeClassName 属性来实现。

在下面的代码 list 中，我尝试在包含 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 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 将 css 文件打包到 src/app/*/

 {
        // 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 属性等于“突出显示”。

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

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

工作代码和盒子 link