SelectDisplayProps
className์ ์ถ๊ฐํ๋ฉด ์ค์ ๋ก ๊ธฐ์กด className์ ๋ฎ์ด ์๋๋ค.
๋๋ ๊ตฌ์ฑ ์์. Select์ ์ ํ๋ ๊ฐ์ ํ์ํ๋ div์ className์ ์ ๊ณตํ๊ณ ์ถ์ ๋ ๋ชจ๋ ์ฌ์ง UI ๊ตฌ์ฑ ์์์ ๊ฐ์ด ๋ค๋ฅธ ํด๋์ค์ className์ ์ถ๊ฐํ๋ ๋์ ์ด๋ฅผ ์ฌ์ ์ํฉ๋๋ค.
<Select />
๊ตฌ์ฑ ์์๊ฐ ์์ต๋๋ค. className
์ SelectDisplayProps
className
๋ฅผ ์ถ๊ฐํ๋ฉด ์ ํํ ๊ฐ์ ํ์ํ๋ ๊ตฌ์ฑ ์์์ ๊ธฐ์กด ํด๋์ค ์ด๋ฆ์ ๋ฎ์ด ์๋๋ค. .
๊ธฐ์กด ํด๋์ค ์ด๋ฆ์ ์ฌ์ ์ํด์๋ ์๋์ง๋ง ์ฌ๊ธฐ์ ์ถ๊ฐํด์ผํฉ๋๋ค.
์ฌ๊ธฐ์์ ๋ฒ๊ทธ๋ฅผ ํ์ธํ ์์๋ ์๋ ๋ฐ์ค๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค. https://codesandbox.io/s/material-ui-issue-forked-oi0vd
๋จ๊ณ :
SelectDisplayProps
๊ฐ์ฒด๊ฐ ์์ต๋๋ค.SelectDisplayProps={{
className: classes.selectDisplay
}}
SelectDisplayProps
๊ฐ ์ ์๋์ง ์์ ๊ฒ์ฒ๋ผ ๋ณ๊ฒฝ๋ฉ๋๋ค.SelectDisplayProps
์ด ์์ผ๋ฉด ์ฌ์ง UI ๊ธฐ๋ณธ ํด๋์ค๊ฐ ์์์ DOM์ ๊ฒ์ฌํ์ฌ ํ์ธํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ SelectDisplayProps
๋ฅผ ์ง์ ํ๋ฉด className์ด ์ฌ๋ผ์ง๋๋ค.์ ํ ๊ฐ์ ํ์ํ๋ ์์์ ์คํ์ผ์ ์ฌ์ ์ํ๊ณ ์ถ์ต๋๋ค. ๋ด๊ฐ ์ฃผ๋ ค๋ ์คํ์ผ์ ์์ ํ ๋ฐ๊ฟ๋ ๋ฌธ์ ๊ฐ ์กด์ฌํ๊ธฐ ๋๋ฌธ์ ๊ด๋ จ์ด ์๋ค๊ณ ์๊ฐํฉ๋๋ค.
| ๊ธฐ์ | ๋ฒ์ |
| ----------- | ------- |
| Material-UI | v4.11.0 |
| ๋ฐ์ | 16.13.1 |
| ๋ธ๋ผ์ฐ์ | Chrome-๋ฒ์ 86.0.4240.75 (๊ณต์ ๋น๋) (64 ๋นํธ) |
| TypeScript | 3.9.5 |
@Newpoki ์ ๊ณ ํด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค. ๋ฌธ์ ๋ฅผ ํ์ธํ ์ ์์ต๋๋ค. ์ด ์์ ์ฌํญ์ ๋ํด ์ด๋ป๊ฒ ์๊ฐํ์ญ๋๊น?
diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
index eb58ecd1b3..2098d0f3b8 100644
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/packages/material-ui/src/Select/SelectInput.js
@@ -353,16 +353,6 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
return (
<React.Fragment>
<div
- className={clsx(
- classes.root, // TODO v5: merge root and select
- classes.select,
- classes.selectMenu,
- classes[variant],
- {
- [classes.disabled]: disabled,
- },
- className,
- )}
ref={setDisplayNode}
tabIndex={tabIndex}
role="button"
@@ -376,6 +366,17 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
onBlur={handleBlur}
onFocus={onFocus}
{...SelectDisplayProps}
+ className={clsx(
+ classes.root, // TODO v5: merge root and select
+ classes.select,
+ classes.selectMenu,
+ classes[variant],
+ {
+ [classes.disabled]: disabled,
+ },
+ className,
+ SelectDisplayProps.className
+ )}
// The id is required for proper a11y
id={buttonId}
>
ํ ๋ฆฌํ์คํธ ์์ ์ ํ์๊ฒ ์ต๋๊น? :)
๋๋ ๊ทธ๊ฒ์ ์๋ํ๊ณ ์ถ์ต๋๋ค. ๋์๊ฒ ํ ๋น ํ ์ ์์ต๋๊น?
์๋
ํ์ธ์,
๋ต์ฅ์ด ๋ฆ์ด์ ๋ฏธ์ ํด์, ์ ์ง์ฅ์ ์์์ด์ : sweat_smile :
๊ธฐ์๋ค ๊ทธ๊ฒ์ ๋ด ๋ง์์์๊ฐ ์๋๋ผ ์ง์ง ๋ฌธ์ ์๊ณ ์์ ๋ ๊ฒ์ ๋๋ค .D
PR์ ๋ํด @reedanders ์๊ฒ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.