여러 인라인 스타일 객체를 결합하는 방법은 무엇입니까?

여러 인라인 스타일 객체를 결합하는 방법은 무엇입니까?

---

React에서 객체를 명확하게 생성하고 인라인 스타일로 할당 할 수 있습니다. 즉. 아래에 언급.

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

var divStyle2 = {fontSize: '18px'};

React.render(<div style={divStyle}>Hello World!</div>, mountNode);

여러 객체를 결합하여 함께 할당하려면 어떻게해야합니까?

---

React Native를 사용하는 경우 배열 표기법을 사용할 수 있습니다.

<View style={[styles.base, styles.background]} />

자세한 내용은 문서 를 참조하십시오.

---

스프레드 연산자를 사용할 수 있습니다.

 <button style={{...styles.panel.button,...styles.panel.backButton}}>Back</button

---

당신은 이것을 할 수 있습니다 Object.assign().

귀하의 예에서, 당신은 할 것입니다 :

ReactDOM.render(
    <div style={Object.assign(divStyle, divStyle2)}>
        Hello World!
    </div>,
    mountNode
);

두 가지 스타일이 병합됩니다. 일치하는 속성이있는 경우 두 번째 스타일이 첫 번째 스타일을 대체합니다.

Brandon이 언급했듯이 fontSize를 적용하지 않고 Object.assign({}, divStyle, divStyle2)재사용 하려면 사용해야 divStyle합니다.

이것을 사용하여 기본 속성을 가진 구성 요소를 만들고 싶습니다. 예를 들어 다음은 기본값을 가진 작은 상태 비 저장 구성 요소입니다 margin-right.

const DivWithDefaults = ({ style, children, ...otherProps }) =>
    <div style={Object.assign({ marginRight: "1.5em" }, style)} {...otherProps}>
        {children}
    </div>;

따라서 다음과 같이 렌더링 할 수 있습니다.

<DivWithDefaults>
    Some text.
</DivWithDefaults>
<DivWithDefaults className="someClass" style={{ width: "50%" }}>
    Some more text.
</DivWithDefaults>
<DivWithDefaults id="someID" style={{ marginRight: "10px", height: "20px"}}>
    Even more text.
</DivWithDefaults>

결과는 다음과 같습니다.

<div style="margin-right:1.5em;">Some text.</div>
<div style="margin-right:1.5em;width50%;" class="someClass">Some more text.</div>
<div style="margin-right:10px;height:20px;" id="someID">Even more text.</div>

---

React Native와 달리 React에서 스타일 배열을 전달할 수 없습니다.

<View style={[style1, style2]} />

React에서는 style 속성에 전달하기 전에 단일 스타일 객체를 만들어야합니다. 처럼:

const Header = (props) => {
  let baseStyle = {
    color: 'red',
  }

  let enhancedStyle = {
    fontSize: '38px'
  }

  return(
    <h1 style={{...baseStyle, ...enhancedStyle}}>{props.title}</h1>
  );
}

ES6 Spread 연산자 를 사용하여 두 가지 스타일을 결합했습니다. 같은 목적으로 Object.assign () 을 사용할 수도 있습니다 .

var에 스타일을 저장할 필요가없는 경우에도 작동합니다

<Segment style={{...segmentStyle, ...{height:'100%'}}}>
    Your content
</Segment>

---

Object.assign()쉬운 솔루션이지만 (현재) 최고 답변 의 사용법은 상태 비 저장 구성 요소를 만드는 데는 좋지만 두 state개체 를 병합하는 OP의 원하는 목표에 문제를 일으킬 것입니다 .

두 개의 인수를 사용 Object.assign()하면 실제로 첫 번째 객체를 제자리에서 변경하여 향후 인스턴스화에 영향을줍니다.

전의:

상자에 가능한 두 가지 스타일 구성을 고려하십시오.

var styles =  {
  box: {backgroundColor: 'yellow', height: '100px', width: '200px'},
  boxA: {backgroundColor: 'blue'},
};

So we want all our boxes to have default 'box' styles, but want to overwrite some with a different color:

// this will be yellow
<div style={styles.box}></div>

// this will be blue
<div style={Object.assign(styles.box, styles.boxA)}></div>

// this SHOULD be yellow, but it's blue.
<div style={styles.box}></div>

Once Object.assign() executes, the 'styles.box' object is changed for good.

The solution is to pass an empty object to Object.assign(). In so doing, you're telling the method to produce a NEW object with the objects you pass it. Like so:

// this will be yellow
<div style={styles.box}></div>

// this will be blue
<div style={Object.assign({}, styles.box, styles.boxA)}></div>

// a beautiful yellow
<div style={styles.box}></div>

This notion of objects mutating in-place is critical for React, and proper use of Object.assign() is really helpful for using libraries like Redux.

---

Array notaion is the best way of combining styles in react native.

This shows how to combine 2 Style objects,

<Text style={[styles.base, styles.background]} >Test </Text>

this shows how to combine Style object and property,

<Text style={[styles.base, {color: 'red'}]} >Test </Text>

This will work on any react native application.

---

You can also combine classes with inline styling like this:

<View style={[className, {paddingTop: 25}]}>
  <Text>Some Text</Text>
</View>

---

To take this one even further, you could create a classnames-like helper function:

const styleRules = (...rules) => {
  return rules.filter(Boolean).reduce((result, rule) => {
    return { ...result, ...rule };
  }, {});
};

And then use it conditionally in your components:

<div style={

  styleRules(
    divStyle,
    (window.innerWidth >= 768) && divStyleMd,
    (window.innerWidth < 768) && divStyleSm
  )

}>Hello World!</div>

---

For ones that looking this solution in React, If you want to use the spread operator inside style, you should use: babel-plugin-transform-object-rest-spread.

Install it by npm module and configure your .babelrc as such:

{
  "presets": ["env", "react"],
  "plugins": ["transform-object-rest-spread"]
}

Then you can use like...

const sizing = { width: 200, height: 200 }
 <div
   className="dragon-avatar-image-background"
   style={{ backgroundColor: blue, ...sizing }}
  />

More info: https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread/

---

So basically I'm looking at this in the wrong way. From what I see, this is not a React specific question, more of a JavaScript question in how do I combine two JavaScript objects together (without clobbering similarly named properties).

In this StackOverflow answer it explains it. How can I merge properties of two JavaScript objects dynamically?

In jQuery I can use the extend method.

---

To Expand on what @PythonIsGreat said, I create a global function that will do it for me:

var css = function(){
    var args = $.merge([true, {}], Array.prototype.splice.call(arguments, 0));
    return $.extend.apply(null, args);
}

This deeply extends the objects into a new object and allows for a variable number of objects as parameters. This allows you to do something like this:

return(
<div style={css(styles.base, styles.first, styles.second,...)} ></div>
);

var styles = {
  base:{
    //whatever
  },
  first:{
    //whatever
  },
  second:{
    //whatever
  }
}

---

I have built an module for this if you want to add styles based on a condition like this:

multipleStyles(styles.icon, { [styles.iconRed]: true })

https://www.npmjs.com/package/react-native-multiple-styles

---

Ways of inline styling:

<View style={[styles.red, {fontSize: 25}]}>
  <Text>Hello World</Text>
</View>

<View style={[styles.red, styles.blue]}>
  <Text>Hello World</Text>
</View>

  <View style={{fontSize:10,marginTop:10}}>
  <Text>Hello World</Text>
</View>

참고URL : https://stackoverflow.com/questions/29979324/how-to-combine-multiple-inline-style-objects