Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commite4c58ac

Browse files
committed
add emotion to styles
1 parent76aadee commite4c58ac

File tree

22 files changed

+185
-118
lines changed

22 files changed

+185
-118
lines changed

‎web-app/package-lock.json‎

Lines changed: 116 additions & 70 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎web-app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@alifd/next":"^1.19.8",
3030
"@alifd/theme-4":"^0.2.3",
3131
"@apollo/react-hooks":"^3.1.3",
32+
"@emotion/core":"^10.0.27",
3233
"apollo-boost":"^0.4.7",
3334
"graphql":"^14.5.8",
3435
"markdown-it":"^10.0.0",

‎web-app/src/components/Button/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import{ButtonasAlifdButton}from'@alifd/next'
22
import*asReactfrom'react'
3+
import{css,jsx}from'@emotion/core'
34

45
interfaceProps{
56
style?:React.CSSProperties
@@ -10,7 +11,7 @@ interface Props {
1011
}
1112

1213
constButton=(props:Props)=>(
13-
<AlifdButtononClick={props.onClick}type={props.type}disabled={props.disabled}style={props.style}>
14+
<AlifdButtononClick={props.onClick}type={props.type}disabled={props.disabled}css={props.style}>
1415
{props.children}
1516
</AlifdButton>
1617
)

‎web-app/src/components/Card/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import{CardasAlifdCard}from'@alifd/next'
22
import*asReactfrom'react'
3+
import{css,jsx}from'@emotion/core'
34

45
conststyles={
56
card:{
@@ -19,7 +20,7 @@ const Card = (props: Props) => (
1920
showTitleBullet={false}
2021
contentHeight="auto"
2122
onClick={props.onClick}
22-
style={{ ...styles.card, ...props.style}}
23+
css={{ ...styles.card, ...props.style}}
2324
>
2425
{props.children}
2526
</AlifdCard>

‎web-app/src/components/Checkbox/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import*asReactfrom'react'
2+
import{css,jsx}from'@emotion/core'
23

34
conststyles={
45
box:{
@@ -26,9 +27,9 @@ const Checkbox = (props: Props) => {
2627
constchecked=props.status==='COMPLETE'
2728

2829
return(
29-
<divstyle={styles.box}>
30+
<divcss={styles.box}>
3031
<label>
31-
<inputstyle={styles.input}type="checkbox"checked={checked}onChange={onChange}/>
32+
<inputcss={styles.input}type="checkbox"checked={checked}onChange={onChange}/>
3233
</label>
3334
</div>
3435
)

‎web-app/src/components/Debugger/index.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import*asReactfrom'react'
22
import*asTfrom'typings'
3+
import{css,jsx}from'@emotion/core'
34

45
interfacePropsextendsT.MachineContext{
56
state:string
67
children:React.ReactElement
78
}
89

910
constDebugger=({ state, children, env, position, progress, processes, tutorial}:Props)=>(
10-
<divstyle={{backgroundColor:'#FFFF99',color:'black',padding:'.5rem'}}>
11+
<divcss={{backgroundColor:'#FFFF99',color:'black',padding:'.5rem'}}>
1112
<h4>state:{state}</h4>
1213
<p>MachineId:{env.machineId}</p>
1314
<p>SessionId:{env.sessionId}</p>
1415
<p>tutorial:{tutorial ?tutorial.id :'none'}</p>
15-
<pstyle={{backgroundColor:'khaki',padding:'.5rem'}}>position:{JSON.stringify(position)}</p>
16-
<pstyle={{backgroundColor:'moccasin',padding:'.5rem'}}>progress:{JSON.stringify(progress)}</p>
17-
<pstyle={{backgroundColor:'beige',padding:'.5rem'}}>processes:{JSON.stringify(processes)}</p>
16+
<pcss={{backgroundColor:'khaki',padding:'.5rem'}}>position:{JSON.stringify(position)}</p>
17+
<pcss={{backgroundColor:'moccasin',padding:'.5rem'}}>progress:{JSON.stringify(progress)}</p>
18+
<pcss={{backgroundColor:'beige',padding:'.5rem'}}>processes:{JSON.stringify(processes)}</p>
1819
{children}
1920
</div>
2021
)

‎web-app/src/components/Divider.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import*asReactfrom'react'
2+
import{css,jsx}from'@emotion/core'
23

34
conststyles={
45
divider:{
@@ -7,6 +8,6 @@ const styles = {
78
},
89
}
910

10-
constDivider=()=><divstyle={styles.divider}/>
11+
constDivider=()=><divcss={styles.divider}/>
1112

1213
exportdefaultDivider

‎web-app/src/components/Error/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import{ApolloError}from'apollo-boost'
22
import{GraphQLError}from'graphql'
33
import*asReactfrom'react'
4+
import{css,jsx}from'@emotion/core'
45

56
conststyles={
67
container:{
@@ -17,7 +18,7 @@ interface Props {
1718
constErrorView=({ error}:Props)=>{
1819
console.log(error)
1920
return(
20-
<divstyle={styles.container}>
21+
<divcss={styles.container}>
2122
<h1>Error</h1>
2223
{error.graphQLErrors&&(
2324
<div>

‎web-app/src/components/Icon/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import{IconasAlifdIcon}from'@alifd/next'
22
import*asReactfrom'react'
3+
import{css,jsx}from'@emotion/core'
34

45
interfaceProps{
56
type:string
@@ -9,7 +10,7 @@ interface Props {
910
}
1011

1112
constIcon=(props:Props)=>{
12-
return<AlifdIcontype={props.type}role={props.role}size={props.size}style={props.style}/>
13+
return<AlifdIcontype={props.type}role={props.role}size={props.size}css={props.style}/>
1314
}
1415

1516
exportdefaultIcon

‎web-app/src/components/ProcessEvents/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import{MessageasAlifdMessage}from'@alifd/next'
22
import*asReactfrom'react'
33
import*asTfrom'typings'
4+
import{css,jsx}from'@emotion/core'
45

56
interfaceProps{
67
processes:T.ProcessEvent[]
@@ -19,7 +20,7 @@ const ProcessEvents = ({ processes }: Props) => {
1920
returnnull
2021
}
2122
return(
22-
<divstyle={styles.container}>
23+
<divcss={styles.container}>
2324
{processes.map(process=>(
2425
<AlifdMessagekey={process.title}type="loading"size="medium"title={process.title}>
2526
{process.description}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp