使用 css 个模块扩展 CSS 类 个框架
Extending CSS classes of frameworks with css modules
我目前正在开发一个 React 项目,在某些情况下必须扩展 CSS class 类 bootstrap 框架的属性。比如我想改变这个class(https://github.com/ColorlibHQ/AdminLTE/blob/v2.4.18/dist/css/AdminLTE.css#L99).
的背景颜色
如何使用 babel-plugin-react-css-modules 做到这一点?我只能使用我自己的 CSS class 或 AdminLTE:
import React from 'react';
import bootstrap from 'boostrap';
import foo from './Foo.css';
export default class Foo extends React.Component {
render () {
return <div styleName='foo.main-footer'>Hello World</div>;
or
return <div styleName='bootstrap.main-footer'>Hello World</div>;
}
}
在项目中我们使用了webpack(v4.41.0)、babel(v7.6.2)和react(16.10.1)。要使用 CSS classes,我们使用 babel 插件 babel-plugin-react-css-modules,它使用 css 模块。
现代和现代的方法是什么?
我找到了一个解决方案,您只需将两者 类 一个接一个地命名即可:
import React from 'react';
import bootstrap from 'boostrap';
import foo from './Foo.css';
export default class Foo extends React.Component {
render () {
return <div styleName='bootstrap.main-footer foo.main-footer'>Hello World</div>;
}
}
我目前正在开发一个 React 项目,在某些情况下必须扩展 CSS class 类 bootstrap 框架的属性。比如我想改变这个class(https://github.com/ColorlibHQ/AdminLTE/blob/v2.4.18/dist/css/AdminLTE.css#L99).
的背景颜色如何使用 babel-plugin-react-css-modules 做到这一点?我只能使用我自己的 CSS class 或 AdminLTE:
import React from 'react';
import bootstrap from 'boostrap';
import foo from './Foo.css';
export default class Foo extends React.Component {
render () {
return <div styleName='foo.main-footer'>Hello World</div>;
or
return <div styleName='bootstrap.main-footer'>Hello World</div>;
}
}
在项目中我们使用了webpack(v4.41.0)、babel(v7.6.2)和react(16.10.1)。要使用 CSS classes,我们使用 babel 插件 babel-plugin-react-css-modules,它使用 css 模块。
现代和现代的方法是什么?
我找到了一个解决方案,您只需将两者 类 一个接一个地命名即可:
import React from 'react';
import bootstrap from 'boostrap';
import foo from './Foo.css';
export default class Foo extends React.Component {
render () {
return <div styleName='bootstrap.main-footer foo.main-footer'>Hello World</div>;
}
}