react : style componet 상속

This commit is contained in:
kim
2021-02-03 21:24:29 +09:00
parent 4478635b3a
commit 5ab44f06f9
2 changed files with 7 additions and 2 deletions

View File

@@ -1 +1 @@
[{"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js":"1","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js":"2","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Sub.js":"3","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Style.js":"4","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Header.js":"5","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Footer.js":"6","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Login.js":"7","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\LoginPage.js":"8","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\HomePage.js":"9","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\home\\Home.js":"10"},{"size":220,"mtime":1612343693643,"results":"11","hashOfConfig":"12"},{"size":195,"mtime":1612350514674,"results":"13","hashOfConfig":"12"},{"size":196,"mtime":1612336218178,"results":"14","hashOfConfig":"12"},{"size":163,"mtime":1612343575699,"results":"15","hashOfConfig":"12"},{"size":549,"mtime":1612354669010,"results":"16","hashOfConfig":"12"},{"size":497,"mtime":1612348360786,"results":"17","hashOfConfig":"12"},{"size":293,"mtime":1612348402121,"results":"18","hashOfConfig":"12"},{"size":377,"mtime":1612346120758,"results":"19","hashOfConfig":"12"},{"size":1674,"mtime":1612354755132,"results":"20","hashOfConfig":"12"},{"size":1222,"mtime":1612354711881,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"11g3wnd",{"filePath":"24","messages":"25","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js",["42"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Sub.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Style.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Header.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Footer.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Login.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\LoginPage.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\HomePage.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\home\\Home.js",[],{"ruleId":"43","severity":1,"message":"44","line":3,"column":8,"nodeType":"45","messageId":"46","endLine":3,"endColumn":17},"no-unused-vars","'LoginPage' is defined but never used.","Identifier","unusedVar"]
[{"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js":"1","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js":"2","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Sub.js":"3","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Style.js":"4","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Header.js":"5","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Footer.js":"6","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Login.js":"7","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\LoginPage.js":"8","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\HomePage.js":"9","C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\home\\Home.js":"10"},{"size":220,"mtime":1612343693643,"results":"11","hashOfConfig":"12"},{"size":195,"mtime":1612350514674,"results":"13","hashOfConfig":"12"},{"size":196,"mtime":1612336218178,"results":"14","hashOfConfig":"12"},{"size":163,"mtime":1612343575699,"results":"15","hashOfConfig":"12"},{"size":549,"mtime":1612354669010,"results":"16","hashOfConfig":"12"},{"size":497,"mtime":1612348360786,"results":"17","hashOfConfig":"12"},{"size":293,"mtime":1612348402121,"results":"18","hashOfConfig":"12"},{"size":377,"mtime":1612346120758,"results":"19","hashOfConfig":"12"},{"size":1674,"mtime":1612354755132,"results":"20","hashOfConfig":"12"},{"size":1367,"mtime":1612355005090,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"11g3wnd",{"filePath":"24","messages":"25","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\index.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\App.js",["42"],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Sub.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\Style.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Header.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Footer.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\Login.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\LoginPage.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\pages\\HomePage.js",[],"C:\\Users\\Woojin\\Desktop\\study\\Study\\react-springboot\\my-app\\src\\components\\home\\Home.js",[],{"ruleId":"43","severity":1,"message":"44","line":3,"column":8,"nodeType":"45","messageId":"46","endLine":3,"endColumn":17},"no-unused-vars","'LoginPage' is defined but never used.","Identifier","unusedVar"]

View File

@@ -5,13 +5,18 @@ const StyledDeleteButton = styled.button`
color: ${(props) => (props.user.username === 'kim' ? 'blue' : 'red')};
`;
const StyleAddButton = styled(StyledDeleteButton)`
background-color: green;
`;
const Home = (props) => {
// 구조분할 할당
const { board, setBoard, user } = props;
return (
<div>
<h1> : </h1>
<h1></h1>
<StyleAddButton user={user}>더하기</StyleAddButton>
<StyledDeleteButton user={user} onClick={() => setBoard([])}>
전체삭제
</StyledDeleteButton>