How do you use withStyles (isomorphic style loader) when your className has a dash in it?

青春壹個敷衍的年華 提交于 2019-12-06 12:41:52

问题


Let's say this is your SCSS:

.someclass {
  background: red;
  height: 1500px;
  width: 10000px;
}

And this is how you use it:

import React, { Component, PropTypes } from 'react'
import ReactDropZone from 'react-dropzone'
import ReactDOM from 'react-dom'
import withStyles from 'isomorphic-style-loader/lib/withStyles'
import s from './ImageTool.scss'

class ImageTool extends Component {

  render() {

    return (

      <div className={s.someclass}></div>

    )

  }

}

export default withStyles(ImageTool, s)

So this works well.

Now what happens if you need to name your class some-class? Clearly className={s.some-class} doesn't work, and neither does className={s.someClass} (nothing happens).


回答1:


The code between the curly braces in JSX is just JavaScript and s is just an object. i.e., you can access properties of s just like you normally would in JS, even if they contain dashes, spaces or other funny characters.

Specifically, you can write:

<div className={s['some-class']}></div>


来源:https://stackoverflow.com/questions/38111259/how-do-you-use-withstyles-isomorphic-style-loader-when-your-classname-has-a-da

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!