<div id="readability-page-1" class="page"><div><h3 id="issue-1">Issue 1</h3>
global로 사용하는 stylesheet를 HOC패턴의 withStyles를 이용하여 사용하고 있는 상황에서 우리만의 custom theme을 적용하고 싶은 경우.
<h3 id="solve-issue-1">Solve issue 1</h3>
withStyles의 두번째 Argumets로는 options 값을 줄 수 있다. 
옵션을 주고 나면, props에 추가된 theme을 이용하여 theme을 사용할 수 있다.
<pre><code>import React from 'react'

import { withStyles } from '@material-ui/core/styles;
import { styleSheet } from './stylesheet

class ExampleComponent extends React.Component {
	...
 	render() {
 	const { theme } = this.props
 return (
 	&lt;button style={{ color: theme.palette.primary[100] }} &gt;예제&lt;/button&gt;
 )
 }
}
 
export default withStyles(styleSheet, { withTheme: true})(ExampleComponent)</code></pre>
<h3 id="issue-2">Issue 2</h3>
이제 custom Theme을 사용할 준비가 되었다. 
사용만 하면 될 것같은데 뭔 이슈가 있을까 싶기도 하지만, 예외는 늘 존재하기 마련이다. 
HTMLElement에 직접 style을 줄 때 theme에 있는 스타일 객체를 같이 적용해야하는 상황이 이때다. (흔한 일은 아닐 것 같다..)
<h3 id="mistake-at-issue-2">Mistake at Issue 2</h3>
아무 생각 없이, react jsx에서 보이듯 style에 객체가 들어가니(얘는 props이건만...) HTMLelement.style도 객체겠거니 막연하게 생각한게 이 실수의 시작이었다. <code>style.color</code> 같이 property에 값을 지정할 수도 있어서 아무 의심도 없이 그렇게 생각했던 것이다.
<pre><code>const { theme } = this.props; 
const span = document.createElement('span');

span.style = {
	...span.style,
 	...theme.typography.body
}</code></pre>
여기서의 패착은 element.style의 타입을 전혀 생각하지 않았다는 점이다.
<h3 id="solve-issue2">Solve Issue2</h3>
일단 적용이 안되는 시점에서야 document를 찾아보기 시작했는데, HTMLElement.style을 설정하는 방법은 아래와 같다.
<pre><code>span.style.cssText = "color: red; font-size: 14px";
//또는
span.setAttribute("style", "color:red; font-size: 14px")</code></pre>
즉 string이 들어가는 것인데, 여기서 또 멘붕이 오는 것이다. 
내가 원하는건 material-ui custom Theme으로 만든 스타일 객체를 적용하는 것인데, 이걸 css 문법으로 바꿔야하는 것인가라는 생각에서 였는데, 의외로 그렇게 어렵지 않게 해결이 가능하다.
<pre><code>Object.assign(span.style, theme.typography.body);

span.style.fontWeight = 500;
...</code></pre>
이렇게 쓰면, 적용이 된다. 유의할 점은 style에 적용하는 것이기 때문에 inline style로 적용이 되는 부분인데, 이점 참고하여 사용하는 것이 좋을 것 같다.
<h3 id="references">References</h3>
<ul>
<li><a href="https://material-ui.com/styles/api/#withstyles-styles-options-higher-order-component">Material-ui:withStyles</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/style">element.style</a></li>
</ul></div></div>

whis

Issue 1
global로 사용하는 stylesheet를 HOC패턴의 withStyles를 이용하여 사용하고 있는 상황에서 우리만의 custom theme을 적용하고 싶은 경우.
Solve issue 1
withStyles의 두번째 Argumets로는 options 값을 줄 수 있다.
옵션을 주고 나면, props에 추가된 theme을 이용하여 theme을 사용할 수 있다.
import React from 'react'
import { withStyles } from '@material-ui/core/styles;
import { styleSheet } from './stylesheet
class ExampleComponent extends React.Component {
 ...
 render() {
 const { theme } = this.props
 return (
 <button style={{ color: theme.palette.primary[100] }} >예제</button>
 )
 }
}
export default withStyles(styleSheet, { withTheme: true})(ExampleComponent)
Issue 2
이제 custom Theme을 사용할 준비가 되었다.
사용만 하면 될 것같은데 뭔 이슈가 있을까 싶기도 하지만, 예외는 늘 존재하기 마련이다.
HTMLElement에 직접 style을 줄 때 theme에 있는 스타일 객체를 같이 적용해야하는 상황이 이때다. (흔한 일은 아닐 것 같다..)
Mistake at Issue 2
아무 생각 없이, react jsx에서 보이듯 style에 객체가 들어가니(얘는 props이건만...) HTMLelement.style도 객체겠거니 막연하게 생각한게 이 실수의 시작이었다. style.color 같이 property에 값을 지정할 수도 있어서 아무 의심도 없이 그렇게 생각했던 것이다.
const { theme } = this.props; 
const span = document.createElement('span');
span.style = {
 ...span.style,
 ...theme.typography.body
}
여기서의 패착은 element.style의 타입을 전혀 생각하지 않았다는 점이다.
Solve Issue2
일단 적용이 안되는 시점에서야 document를 찾아보기 시작했는데, HTMLElement.style을 설정하는 방법은 아래와 같다.
span.style.cssText = "color: red; font-size: 14px";
//또는
span.setAttribute("style", "color:red; font-size: 14px")
즉 string이 들어가는 것인데, 여기서 또 멘붕이 오는 것이다. 
내가 원하는건 material-ui custom Theme으로 만든 스타일 객체를 적용하는 것인데, 이걸 css 문법으로 바꿔야하는 것인가라는 생각에서 였는데, 의외로 그렇게 어렵지 않게 해결이 가능하다.
Object.assign(span.style, theme.typography.body);
span.style.fontWeight = 500;
...
이렇게 쓰면, 적용이 된다. 유의할 점은 style에 적용하는 것이기 때문에 inline style로 적용이 되는 부분인데, 이점 참고하여 사용하는 것이 좋을 것 같다.
References
Material-ui:withStyles
element.style

[알쓸신잡] 1.Material-ui withStyles과 Theme

댓글