标签: inline-styles

我想在ReactJS中做这样的事情:

var MyReactClass = React.createClass({
    render: function() {
        var myDivText = "Hello!";
        var myFontSize = 6; //this is actually something more complicated, I'm calculating it on the fly
        var divStyle = {
            font-size: {fontSize + 'px !important;'},
        };
        return (<div style={divStyle}>{myDivText}</div>);
   }
});

问题是当我运行我的代码时出现这个错误:"模块构建失败:错误:解析错误:第5行:意外的令牌 - "显然,React不喜欢它font-size有一个破折号.我该如何解决这个问题？有没有办法逃脱这个角色的反应？是否有一些不同的css属性反应更好,做同样的事情？

谢谢!

是否有一个CSS选择器来定位具有内联样式的元素？那么我可以仅使用CSS来定位第一个跨度而不是第二个跨度吗？

如果没有,可以用jQuery完成吗？

http://jsfiddle.net/TYCNE/

<p style="text-align: center;">
    <span>target</span>
</p>

<p>
    <span>not target</span>
</p>
?

我有一个名为“ExplanationLists”的 React 组件，我想li使用 css 伪代码将动态内联样式添加到html 元素中li::after，这样我就可以更好地使用图形来设置项目符号的样式。例如，

li::before {
    content: dynamic_content;
}

但是，我无法真正做到这一点。任何建议将不胜感激。

下面是我写的代码。

class ExplanationLists extends Component{
    populateHtml(){
        // asign lists data into variable "items"
        var items = this.props.items; 

        // loop though items and pass dynamic style into li element
        const html = items.map(function(item){
            var divStyle = {
                display: "list-item",
                listStyleImage: 
                    'url(' +  
                    '/images/icons/batchfield_fotograf_rosenheim_icon_' + 
                    item.icon +
                    '.png' +
                    ')'   
            };  

            // html templating 
            return (
                 <li style={divStyle}>
                   <h3 >{item.title}</h3>
                   <p>{item.desc}</p>
                 </li>
            );
        });

        // return …

我在MailChimp的css内联http://www.mailchimp.com/labs/inlinecss.php上结束了,我想知道是否有任何课程可以做到这一点,我很乐意把它放在我的电子邮件代码中一路走到MailChimp.

基本上我正在寻找代码,在页面后面或类似的东西.

干杯.

如何nth-child(n)在将内联样式应用于元素(显然包含多个元素)时添加声明.

例如,假设我有一个div包含三个p元素.

一般样式表规则如下:

div p:nth-child(2) {
  color: blue;
}

但是,如果在内容中应用内联样式,我仍然可以将第二段颜色设置为蓝色div？

我有一个使用ReactJS构建的响应式Web应用程序,我希望有一天能够支持服务器端呈现.

根据视口大小,应用程序布局/行为会发生变化.但所有这些变化不仅可以通过简单的CSS mediaquery来完成:JS行为,而且底层HTML结构也必须根据宽度进行更改.

例如,我可以:

宽度在800px以下:

<div class="app">
  <div class="menu-mobile">...</div>
  <div class="content">...</div>
  <div class="mobile-left-menu">...</div>
  <div class="footer-mobile">...</div>
</div>

宽度超过800像素:

<div class="app">
  <div class="menu">...</div>
  <div class="main">
    <div class="left-menu">...</div>
    <div class="content">...</div>
    <div class="right-menu">...</div>
  </div>
  <div class="footer">...</div>
</div>

现在,我想为该应用程序使用服务器端呈现.但是在服务器上我没有宽度,所以我不知道返回客户端的HTML结构.

请注意,我不是在寻找使用静态默认服务器端断点的解决方案,而是在客户端上更正应用程序.我正在寻找一种解决方案,根据其设备返回给客户端正确的html结构.因此,如果他在浏览器上禁用javascript,它应该可以正常工作.

有人可能会说我可以渲染两者所需的html,并使用普通的CSS媒体查询隐藏/显示所需的部分display: none,但它会使应用程序变得复杂并使其呈现大量未使用的html元素,因为通常用户不太可能移动断点上方/下方(我的意思是如果他有移动设备,桌面的html元素永远不会被使用)

此外,如果我想使用内联样式,它会变得复杂,因为我必须在服务器上呈现这些内联样式以获得正确的宽度.

我看到有些人正在考虑嗅探浏览器UA来估计他们的视口大小.但即使有一些不安全的屏幕尺寸检测,我也不确定我们是否可以知道服务器端的设备屏幕方向.

我可以做任何事来解决这个问题吗？

虽然使用反应内联式大多数人,他们所做的是在styles属性中使用object.例如. <div style={{left: '54px', position: 'absolute'}}> </div>

这种反应差异算法是否在这里失败,因为它们是每次重新渲染时创建的新对象.

假设我有一长串内联样式,例如:

<input type="radio" style="visibility: hidden; position: absolute; foo: bar; baz: foo; etcetera: etc; and: more;">

然后我决定让它更像这样:

<input type="radio" style="visibility: hidden; position: absolute;
    foo: bar; baz: foo; etcetera: etc; and: more;">

这是否会影响功能,还是可以将其分成多行？

我试图在IE9-10删除无效值之前获取style属性的值.到目前为止,我已经尝试了以下各种变体 -

$0.attributes.style $0.style $0.getAttribute('style')

但似乎我试图设置一个无效的值,我无法访问它 -

<div style="display: none; color: ${fake-value}">

</div>

以上所有内容都只会返回,display: none因为IE9-10会删除无效值.

作为一个说明,我已经尝试了大量的变化,所以如果它不可能是好的,但你尝试过或者你可以尝试答案没有多少帮助,除非他们被确认做某事:)

一个js插件正在添加一种令我头疼的风格:

element.style {
     z-index: 100 !important;
}

所以我试过这个:

html body div#shell div#shellContent div#bottomPart div#rightCol div.containerBox    
div#embedContainer div#janrainEngageEmbed div.janrainContent div#janrainView   
div.janrainHeader[style] {
    z-index: 1 !important;
}

但仍然没有.