反応インラインスタイルでgrid-template-areasを使用するには？

grid-template-areasには、インライン反応スタイルでは互換性のない少し異なる構文があることに気付いたので、私はcss-gridsと反応していました。私はどんなライブラリも使っていないのですが、普通のスタイルのインラインスタイルはスタイルpropを使って反応します。反応インラインスタイルでgrid-template-areasを使用するには？

私がやっていることはこれに似ています。

.wrapper { 
    display: grid; 
    grid-template-columns: 100px 100px; 
    grid-template-areas: "header header" 
         "aside main" 
         "footer footer" 
} 

.header { 
    grid-area: header; 
    border: 1px solid red; 
} 
.main { 
    grid-area: main; 
    border: 1px solid green; 
} 

.aside { 
    grid-area: aside 
} 
.footer { 
    grid-area: footer; 
    border: 1px solid yellow; 
}

Fidde：https://jsbin.com/lejaduj/2/edit?html,css,output

レイアウトは、「ヘッダ」及びすべての列と「脇」と「メイン」の半分を覆うカバー「フッタ」シンプルです。これはデモの目的にすぎませんので、私はそれを簡単に保ちました。
特に、grid-template-areasに複数の値が二重引用符で区切られていることに注目してください。

私は反応インラインスタイルでgridTemplateAreasの配列を使用できると思ったのですが、それはうまくいかないようでした。

template-literalsでもう一度試しましたが、どちらもうまくいきませんでした。

サンドボックス：https://codesandbox.io/s/zx4nokmr5l

だから、それは私だけそれは、この障害物に当たっていているか、この反応ではまだサポートされていませんか？

可能な限りこれを達成するために、余分なライブラリやフレームワークを使用するのではなく、

出典

2017-12-10 shriek

grid-template-areas属性をHTML style属性（つまりCSSインラインスタイル）で使用することを目指す場合は、二重引用符の代わりにsingleを使用します。

.wrapper { 
 
    display: grid; 
 
    grid-template-columns: 100px 100px; 
 
    /* grid-template-areas: "header header" 
 
          "aside main" 
 
          "footer footer"; */ 
 
} 
 

 
.header { 
 
    grid-area: header; 
 
    background-color: aqua; 
 
} 
 

 
.main { 
 
    grid-area: main; 
 
    background-color: lightgreen; 
 
} 
 

 
.aside { 
 
    grid-area: aside; 
 
    background-color: yellow; 
 
} 
 

 
.footer { 
 
    grid-area: footer; 
 
    background-color: pink; 
 
}

<body class="wrapper" style="grid-template-areas: 'header header' 'aside main' 'footer footer' "> 
 
    <div class="header">header</div> 
 
    <div class="main">main</div> 
 
    <div class="aside">aside</div> 
 
    <div class="footer">footer</div> 
 
</body>

出典

2017-12-10 21:17:41

これは 'jsx'ではうまくいきませんか？ – shriek

あなたの質問の一部が二重引用符に対処されました。それが私が取り組む問題です。 –

聖なるたわごと。あなたは私を助けてくれたかもしれません。もちろん、 'json'でも二重引用符の中に一重引用符を付けることができます。なぜ私はそれを考えなかったのですか？助けてくれてありがとう。あなたがそれを反映するようにあなたの答えを編集できるならば、私はこれを正しくマークすることを嬉しく思います。 – shriek

あなたはスタイルでオブジェクトを必要とする場合、これは

myStyle = { 
     display: 'grid', 
     gridTemplateAreas: "'header' 'content' 'footer'", 
     gridTemplateRows: '50px calc(100vh - 100px) 50px' 
    };

の作品と私はstyletron

import { styled } from 'styletron-react'; 

    const myStyle = { 
     backgroundColor: 'whitesmoke', 
     display: 'grid', 
     gridTemplateAreas: "'header' 'content' 'footer'", 
     gridTemplateRows: '50px calc(100vh - 100px) 50px' 
    }; 

    const Layout = styled('div', (props) => (myStyle)); 

    export default Layout;

を使用して行ったようにスタイルオブジェクトのインライン

を使用

出典

2018-01-03 04:44:51 Alexander

バックテック文字列を使用してください。

gridTemplateAreas: ` 
        'header header' 
        'aside main' 
        'footer footer' 
       `

出典

2018-01-18 20:55:31

反応インラインスタイルでgrid-template-areasを使用するには？

答えて

関連する問題