我们如何在React应用程序的客户端显示CSS类

Question

我想让用户看看我使用了什么样式，这样我就可以如何发送我在react中编写样式的css类。JS文件和css文件不同。在css文件中，样式是书写的。

.SideBar{
border: 1px solid black;
height: 700px;
background-color: silver;
margin-top: 5px;
}

现在我希望这个类出现在我的用户界面上。那么我应该用JS写些什么呢。从"导入类/Project.module.css'；

这些属性在JSX元素上运行良好，但我希望用户能够看到这些属性。那么，我该如何在JSX中编写，以便用户看到这些属性呢。

预期输出：-在UI上

.SideBar{
border: 1px solid black;
height: 700px;
background-color: silver;
margin-top: 5px;
}

那么我应该怎么做

Answer 1

您可以在组件中的样式标记中写入样式，然后向用户显示样式标记本身。

以下是如何在渲染函数中编写样式标记：https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974

在这里查看样式标签本身：https://css-tricks.com/show-and-edit-style-element/.

例如：

class App extends React.Component {
render() {
return (
<div className="App">
<h1>Show me your style!</h1>

<style dangerouslySetInnerHTML={{__html: `
body style { 
display: block; 
}
h1 { 
color: blue;
}
`}} />
</div>
);
}
}

是的，这很难看，但对你有用。

祝你好运！

Answer 2

在react中，如果要添加CSS，必须在javascript文件中使用className。

示例：

CSS文件：

.menu {
background-color: coral;
}

JS文件：

首先在js文件中导入您的CSS文件

render() {
return <span className="menu">Menu</span>
}

像这样，你可以在js文件中使用css

Answer 3

这个怎么样？

console.clear();
{

function getStyle(className) {
"use strict";
className = className.replace('.', '.');
var styles = Array.from(document.styleSheets).reduce((carry, sheet) => {
var rules;
try { // CORS
rules = sheet.rules || sheet.cssRules;
} catch (e) {
return carry;
}
if (!rules) { return carry }

rules = Array.from(rules).reduce((carry, rule) => {

if (rule.selectorText && rule.selectorText.match(className)) {
carry.push(rule.cssText || rule.style.cssText);
}
return carry;
}, []);
if (rules.length) {
carry.push(rules)
}
return carry;
}, [])
return styles[0];
}
function getElementsWithClasses() {
return Array.from(document.querySelectorAll('[class]'));
}
function over(el) {
var display = document.getElementById('display-fsadhkfjdfkds');
if (!display) {
display = document.createElement('div')
display.setAttribute('id', 'display-fsadhkfjdfkds');
document.body.append(display);
}
display.innerHTML = "";
var html = Array.from(el.classList).reduce((carry, cl) => {carry += getStyle(`.${cl}`); return carry}, "");
display.innerHTML = html;
}
function out(el) {
var display = document.getElementById('display-fsadhkfjdfkds');
if (display) {
display.remove()
}
}

var elems = getElementsWithClasses()


window.addEventListener('mouseover', e => {
if(e.target.classList.length) {
over(e.target)
}
})
document.addEventListener('mouseout', e => {
if(e.target.classList.length) {
out(e.target)
}
})
}

.abra, .ca {
background-color: lightgray;
}
.abra {
color: pink;
}
.dabra {
color: blue;
}
.not-used {
padding: 200px;
}
.date {
padding: 20px;  
}
[class]:hover {
background-color: lightgray;
box-shadow: 0px 0px 5px 1px #800000;
}
#display-fsadhkfjdfkds {
position: fixed;
bottom: 5px;
right: 5px;
width: calc(25vw - 2 * 5px);
height: calc(50vh - 2 * 5px);
border-radius: 10px;
background-color: cornsilk;
border: 1px solid darkgreen;
box-sizing: border-box;
padding: 10px;
}
html, body {
min-height: 100vh;
min-width: 100vw;
}

<code class="abra ca dabra" data-do-it="dont">No code</code>
<div class="extra">
Extra
</div>
<span>No class</span>
<table>
<tr>
<td class="date"><time class="year" style="color: red">2020</time></td>
<td>Event 1</td>
</tr>
</table>

旧

使用CSS和:after伪元素，将class属性作为内容，效果如何？

*[class]:after {
content: "." attr(class);
color: gray;
font-size: .75em;
vertical-align: super;
}

<div class="dig"><span>No</span> <span class="spa">questions</span> <span>asked</span></div>