Material-ui: [์„ ํƒ] SelectDisplayProps์— className์„ ์ถ”๊ฐ€ ํ•  ๋•Œ ์Šคํƒ€์ผ์ด ์†์ƒ๋จ

์— ๋งŒ๋“  2020๋…„ 10์›” 21์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: mui-org/material-ui

SelectDisplayProps className์„ ์ถ”๊ฐ€ํ•˜๋ฉด ์‹ค์ œ๋กœ ๊ธฐ์กด className์„ ๋ฎ์–ด ์”๋‹ˆ๋‹ค.

  • [x]์ด ๋ฌธ์ œ๋Š” ์ตœ์‹  ๋ฆด๋ฆฌ์Šค์— ์žˆ์Šต๋‹ˆ๋‹ค.
  • [x]์ด ์ €์žฅ์†Œ์˜ ๋ฌธ์ œ ๋ฅผ ๊ฒ€์ƒ‰ํ–ˆ์œผ๋ฉฐ ์ด๊ฒƒ์ด ์ค‘๋ณต์ด ์•„๋‹ˆ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

ํ˜„์žฌ ํ–‰๋™ ๐Ÿ˜ฏ

๋‚˜๋Š” .

์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘ ๐Ÿค”

๊ธฐ์กด ํด๋ž˜์Šค ์ด๋ฆ„์„ ์žฌ์ •์˜ํ•ด์„œ๋Š” ์•ˆ๋˜์ง€๋งŒ ์—ฌ๊ธฐ์— ์ถ”๊ฐ€ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

์žฌํ˜„ ๋‹จ๊ณ„ ๐Ÿ•น

์—ฌ๊ธฐ์—์„œ ๋ฒ„๊ทธ๋ฅผ ํ™•์ธํ•  ์ˆ˜์žˆ๋Š” ์ƒŒ๋“œ ๋ฐ•์Šค๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. https://codesandbox.io/s/material-ui-issue-forked-oi0vd

๋‹จ๊ณ„ :

  1. ๋‹น์‹ ์€ ์ƒŒ๋“œ ๋ฐ•์Šค์— ์žˆ์Šต๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ SelectDisplayProps ๊ฐœ์ฒด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
SelectDisplayProps={{
    className: classes.selectDisplay
  }}
  1. ์ž…๋ ฅ ์•„๋ž˜์˜ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด SelectDisplayProps ๊ฐ€ ์ •์˜๋˜์ง€ ์•Š์€ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณ€๊ฒฝ๋ฉ๋‹ˆ๋‹ค.
  2. SelectDisplayProps ์ด ์—†์œผ๋ฉด ์žฌ์งˆ UI ๊ธฐ๋ณธ ํด๋ž˜์Šค๊ฐ€ ์žˆ์Œ์„ DOM์„ ๊ฒ€์‚ฌํ•˜์—ฌ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ SelectDisplayProps ๋ฅผ ์ง€์ •ํ•˜๋ฉด className์ด ์‚ฌ๋ผ์ง‘๋‹ˆ๋‹ค.

์ปจํ…์ŠคํŠธ ๐Ÿ”ฆ

์„ ํƒ ๊ฐ’์„ ํ‘œ์‹œํ•˜๋Š” ์š”์†Œ์˜ ์Šคํƒ€์ผ์„ ์žฌ์ •์˜ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ๋‚ด๊ฐ€ ์ฃผ๋ ค๋Š” ์Šคํƒ€์ผ์„ ์™„์ „ํžˆ ๋ฐ”๊ฟ”๋„ ๋ฌธ์ œ๊ฐ€ ์กด์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ด€๋ จ์ด ์—†๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋‹น์‹ ์˜ ํ™˜๊ฒฝ ๐ŸŒŽ

| ๊ธฐ์ˆ  | ๋ฒ„์ „ |
| ----------- | ------- |
| Material-UI | v4.11.0 |
| ๋ฐ˜์‘ | 16.13.1 |
| ๋ธŒ๋ผ์šฐ์ € | Chrome-๋ฒ„์ „ 86.0.4240.75 (๊ณต์‹ ๋นŒ๋“œ) (64 ๋น„ํŠธ) |
| TypeScript | 3.9.5 |

bug ๐Ÿ› Select good first issue

๋ชจ๋“  3 ๋Œ“๊ธ€

@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 ์—๊ฒŒ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰