js追加样式css样式的方法 js样式选择( 二 )


安装使用yarn add jssyarn add jss-preset-default //使用默认设置import jss from 'jss'import preset from 'jss-preset-default'jss.setup(preset())// 创造你的style.const style = { myButton: { color: 'green' }}//编译样式 , 应用插件 。const sheet = jss.createStyleSheet(style)//如果要在客户端上呈现 , 请将其插入DOM 。sheet.attach()//如果要渲染服务器端 , 请获取CSS文本 。sheet.toString()使用自定义插件进行设置import jss from 'jss'import camelCase from 'jss-plugin-camel-case'import somePlugin from 'jss-some-plugin'//使用插件 。jss.use(camelCase(), somePlugin())// Create your style.const style = { myButton: { color: 'green' }}//编译样式 , 应用插件 。const sheet = jss.createStyleSheet(style)// 如果要在客户端上呈现 , 请将其插入DOMsheet.attach()// 如果要渲染服务器端 , 请获取CSS文本 。sheet.toString()指定DOM插入点<head> <title>JSS</title> <!-- 自定义插入点 --></head>import jss from 'jss'jss.setup({insertionPoint: 'custom-insertion-point'})<head> <title>JSS in body</title></head><body> <div id="insertion-point"> 这可能是你选择的任何DOM节点 , 可以作为插入点 。</div></bodyimport jss from 'jss'jss.setup({ insertionPoint: document.getElementById('insertion-point')})简单案例通过两张图片来体验:
总结JSS的功能是十分强大的 , 不仅仅让写css的方式放到了JavaScript , 这样对更加喜爱编写javascript的小伙伴来说是值得尝试的 , 而且还支持服务器端渲染等更多高级的特性 , 前端技术百花齐放 , 但目前仍然不变的是掌握JavaScript者得天下的时代!


以上关于本文的内容,仅作参考!温馨提示:如遇健康、疾病相关的问题,请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容,希望对您有所帮助: