Question

我正在尝试在react js中创建一个按钮组件。我能够呈现引导类。但是，我需要在引导程序中覆盖一些CSS规则。为此，我创建了一个样式变量。但是，这会引发错误。

parent.js

 <Button   buttonType={TYPES.DANGER} label="Add To Cart" onClick={() => this.addItemToCart(pdpList.uniqueID)}></Button>

button.js

 import React from 'react';

 const styles ={
 background-color:  #EF3829 !important;
 color: #fff;
  border-radius: 0px !important;
 }

export const TYPES = {
 PRIMARY: 'btn-primary',
 WARNING: 'btn-warning',
 DANGER: 'btn-danger',
 SUCCESS: 'btn-success',
 }

  export const Button = (props) => (
   <button  
    onClick={props.onClick} 
      className={props.styles,[ props.buttonType || TYPES.PRIMARY] }
    >
   {props.label}
   </button>
 );

能不能帮我解决这个问题。

Answer 1

第一

样式对象应如下所示：

const styles ={
    background-color:  '#EF3829 !important'; // the value should be an object.. or a variable
    color: '#fff';
    border-radius: '0px !important';
}

第二

我认为按钮的className应该是字符串。

如果要添加自己的内联样式，则可以这样设置style属性。

Answer 2

随后，要在React组件中注入样式，您必须将样式视为标准Javascript对象。每种样式都需要一个键和一个值。对于样式，该值始终是一个字符串。

return map.values()
          .stream()
          .filter(x -> x.getSet().stream().anyMatch(t -> t.getCountry().equals(countryname)))
          .map(R::getSet)
          .flatMap(Set::stream)
          .collect(Collectors.toList());

CSS样式未反映在reactapp中

2 个答案: