标签: react-css-modules

React新手：

我有一个仅当用户访问特定页面时才<Header />希望隐藏的组件。

到目前为止，我设计应用程序的方式<Header />是在导航时不重新渲染 Component，而是仅页面内容，因此它提供了真正的流畅体验。

我试图为每个路线重新渲染标题，这将使其易于隐藏，但是每次导航时，都会出现难看的重新渲染故障。

因此，基本上，是否有一种方法仅在进出特定路径时才重新渲染组件？

如果没有，实现该目标的最佳实践是什么？

App.js：

class App extends Component {

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Frame>
            <Canvas />
            <Header />
            <Main />
            <NavBar />
          </Frame>
        </div>
      </BrowserRouter>
    );
  }
}

Main.js：

const Main = () => (
  <Switch>
    <Route exact activeClassName="active" path="/" component={Home} />
    <Route exact activeClassName="active" path="/art" component={Art} />
    <Route exact activeClassName="active" path="/about" component={About} />
    <Route exact activeClassName="active" path="/contact" component={Contact} …

我正在尝试在 nextjs 中将类名中的变量与 css 模块一起使用，但我很难找出正确的语法。

我的变量来自api：

const type = red

我正在尝试如何做到这一点：

<div className={` ${styles.background} ${styles.--type}`}></div>

我期望的结果：

<div className={` ${styles.background} ${styles.--red}`></div>

有办法做到吗？

到目前为止,我一直在使用Redux"connect"来连接组件和状态,我通过以下方式导出组件:

export default connect(mapStateToProps, actions)(ComponentTitle);

我现在想使用react-css-modules,但我必须在每个组件中使用以下导出:

export default CSSModules(ComponentTitle, styles);

如何导出组件以具有两种功能？

谢谢 :)

我试图在打字稿中使用 react-css-modules，但我收到一条错误消息，无法将 styleName 添加到 div 元素。这是代码。

import * as Immutable from 'immutable';
import * as React from 'react';
import * as  CSSModules from 'react-css-modules';
import { connect } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
const styles = require<any>('./style.scss');

interface RootProps {
    data: Immutable.List<string>;
    dispatch: Dispatch<any>;
}

@CSSModules(styles)
export class Root extends React.Component<RootProps, {}>{
    render() {
        return (
            <div styleName='root'>
              Hello
            </div>
        )
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Root);

我收到此错误消息：'Property 'styleName' does not exist on type 'HTMLProps<HTMLDivElement>' …

我正在尝试使用babel-plugin-react-css-modules弹出的副本create-react-app来限制我的LESS CSS.

我已经设法安装和配置插件,它正在使用styleName属性正确设置范围类名,我已将其配置为使用LESS以及文档.

但是,在导入生成的CSS时,它不会转换类名以匹配元素上设置的类名.这是我webpack.config.dev.js和App.js文件的相关部分.

module: {
    // First, run the linter.
    // It's important to do this before Babel processes the JS.
    preLoaders: [
        {
            test: /\.(js|jsx)$/,
            loader: 'eslint',
            include: paths.appSrc,
        }
    ],
    loaders: [
        // ** ADDING/UPDATING LOADERS **
        // The "url" loader handles all assets unless explicitly excluded.
        // The `exclude` list *must* be updated with every change to loader extensions.
        // When adding a new loader, you …

我注意到 Reactstrap 文档中的大多数表单元素都有 cssModule 的 PropType。我认为这意味着我可以覆盖默认的 Reactstrap 样式并执行如下操作：

表单文本.module.css

.formtext {
  background-color: blue;
  border: 2px solid black;
  margin: 10px;
}

SimpleForm.jsx

import styles from "./Formtext.module.css";
...

<FormText cssModule={styles.formtext}>
   This is some placeholder help text...
</FormText>

````

然而，这似乎不起作用。检查我的反应开发工具， cssModule prop 的计算结果为undefined.

我正在使用 Reactstrap 5.0 和 create-react-app 1.1.5

有什么我不知道但我需要做的事情吗？我需要弹出才能使用 css 模块吗？有人可以向我指出如何正确使用 Reactstrap 的 cssModule 属性的示例吗？

这里供参考的是 Reactstrap 文档中的 proptypes 定义

FormText.propTypes = {
  children: PropTypes.node,
  inline: PropTypes.bool,
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), // default: 'small'
  color: PropTypes.string, // default: 'muted'
  className: PropTypes.string, …

材料界面：v4.8.2
反应：v16.12.0

babel-plugin-react-css-modules 和 rtl 应用程序 - 我想使用 injectFirst 但后来我收到警告： Material-UI: you cannot use the jss and injectFirst props at the same time.

我的猜测是我应该对 jss 进行不同的定义，以便它支持 rtl 和 css 模块。

// Configure JSS - How should I add here the css-modules styles?
const jss = create({ plugins: [...jssPreset().plugins, rtl()] }); 

对于 rtl 我应该这样做：

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

<StylesProvider jss={jss}>
            <ThemeProvider theme={theme}>
                <AppContainer />
            </ThemeProvider>);
        </StylesProvider>

对于 css-modules 样式，我应该这样做：

<StylesProvider injectFirst>
            <ThemeProvider theme={theme}>
                <AppContainer …

我正在尝试在我的 reactjs 应用程序中使用 css 模块。我已经在webpack.config文件中添加了加载器。

 {
                test: /\.css$/,
                loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'

            },

但是，当我导入CSS文件中的我的应用程序，并尝试使用它classNames像{styles.example}那么它不会在我的CSS文件链接到。实例。

这就是我的做法：

import styles from './TestPage.css'

<div className={styles.example}></div>

这是行不通的。

组件没有样式。不过，我在控制台中没有收到任何错误。我该如何解决？

我正在建立一个React网站，以启用css模块样式我弹出使用的项目

npm run eject

我在webpack.config.dev.js和webpack.config.prod.js文件中添加了额外的配置，问题是我正在使用组件调用react-big-calendar（https://github.com/intljusticemission/ react-big-calendar），在该模块中，我必须导入一个css文件。问题是，当我启用模块功能时，它不会将css样式应用于日历，它过去看起来像：

现在看起来像这样：

为了应用大日历css文件中的类，我该怎么办？

谢谢！

test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
    importLoaders: 1,
    modules: true,
    localIdentName: "[name]__[local]__[hash:base64:5]",
    sourceMap: isEnvProduction && shouldUseSourceMap,
}),

错误是：

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src /index.css) ValidationError: 无效的选项对象。CSS Loader 已使用与 API 架构不匹配的选项对象进行初始化。- 选项具有未知属性“localIdentName”。这些属性是有效的：object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals? }

我有一个简单的 scss 文件

.navItem {
  cursor: pointer;
    
  &.active {
    color: $primaryPurple;
  }
    
  &:hover {
    color: $primaryPurple;
  }
    
  span {
    margin-left: 10px;
  }
}

出于某种原因，:hover有效但.active不起作用。正如您在下图中所看到的，li显然有活动类，但我没有看到字体颜色 css 发生了变化。

尝试更改 Toast 容器的背景颜色，下面的代码假设可以实现此目的。我不知道我错过了什么，但它不起作用......

这是我尝试过的：

.toastError {
  margin-top: 15rem;// this works
  &.Toastify__toast--error {
    background: #bd362f !important;// this is is not...
  }
}

反应组件：

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
..
return (
<ToastContainer position="top-center"
          className={styles.toastError}
          autoClose={4000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
        />

margin-top 影响组件但无法更改颜色，该元素在浏览器中如下所示：

我需要做什么才能让它发挥作用？