{"action":"created","issue":{"url":"https://api.github.com/repos/gakimball/react-inky/issues/12","repository_url":"https://api.github.com/repos/gakimball/react-inky","labels_url":"https://api.github.com/repos/gakimball/react-inky/issues/12/labels{/name}","comments_url":"https://api.github.com/repos/gakimball/react-inky/issues/12/comments","events_url":"https://api.github.com/repos/gakimball/react-inky/issues/12/events","html_url":"https://github.com/gakimball/react-inky/issues/12","id":314068443,"number":12,"title":"How to style the component ?","user":{"login":"max8hine","id":15165714,"avatar_url":"https://avatars2.githubusercontent.com/u/15165714?v=4","gravatar_id":"","url":"https://api.github.com/users/max8hine","html_url":"https://github.com/max8hine","followers_url":"https://api.github.com/users/max8hine/followers","following_url":"https://api.github.com/users/max8hine/following{/other_user}","gists_url":"https://api.github.com/users/max8hine/gists{/gist_id}","starred_url":"https://api.github.com/users/max8hine/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/max8hine/subscriptions","organizations_url":"https://api.github.com/users/max8hine/orgs","repos_url":"https://api.github.com/users/max8hine/repos","events_url":"https://api.github.com/users/max8hine/events{/privacy}","received_events_url":"https://api.github.com/users/max8hine/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2018-04-13T11:19:19Z","updated_at":"2018-04-22T03:44:51Z","closed_at":null,"author_association":"NONE","body":"### 3 questions about this library, but more related to implementation question.\r\n\r\n*1. How to put <style /> tag with css into the **header section*** \r\n*and does this library needs to add foundation-email to work?*\r\n\r\nI run node-sass to compile scss to css but not able to find the place to add the compiled css\r\n\r\n```js \r\n// seems no props have been provided to add css string into style tag\r\nfunction inky(elem = '') {\r\n\treturn `\r\n\t<style>\r\n        <!-- Your CSS to inline should be added here -->\r\n    </style>\r\n\t<body>${elem}</body>\t`\r\n}\r\n```\r\n\r\n\r\n*2. seems there is an error in docs*\r\nAt the button of [setup.md](https://github.com/gakimball/react-inky/blob/master/docs/setup.md), \r\n``` js\r\nrenderToString(inky(template)) // the docs\r\ninky(renderToString(template)) // the source code\r\n```\r\n\r\n*3. how to run it in **create-react-app***\r\n```jsx\r\n/** [create-react-app]\r\n\r\nI'm using it on styling email to take advantage of its hot-reloading feature.\r\n\r\nLooking for the better way to implement this lib with create-react-app\r\nThe code below will overlap with default html elements witch generated by browser.\r\nIt means You will have two <header/> inside of <html>\r\n*/\r\n// ./src/index.js\r\nimport React from 'react'\r\nimport { renderToString } from 'react-dom/server';\r\nimport inky from 'react-inky';\r\nimport registerServiceWorker from './registerServiceWorker';\r\n\r\nimport ReactEmail from './emails/pages/ReactEmail';\r\n\r\nconst email = <ReactEmail />;\r\ndocument.body.outerHTML = inky(renderToString(email))\r\n```\r\n\r\n> Thank you for making this incredible library that works so well with **express-react-views** in the server-side-rendering.\r\n> Currently, I use it in express with **mailgun** together. I could provide an example with about how to do it in SSR with **express-react-view** + **nodemailer** or **mailgun** \r\n> I love what you did in Zurb but didn't know this library exist until now.\r\n> I've been searching by keywords `react email template`, but couldn't find this \r\n> library in Google, maybe adding some more keywords on github would help.\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/gakimball/react-inky/issues/comments/383353122","html_url":"https://github.com/gakimball/react-inky/issues/12#issuecomment-383353122","issue_url":"https://api.github.com/repos/gakimball/react-inky/issues/12","id":383353122,"user":{"login":"max8hine","id":15165714,"avatar_url":"https://avatars2.githubusercontent.com/u/15165714?v=4","gravatar_id":"","url":"https://api.github.com/users/max8hine","html_url":"https://github.com/max8hine","followers_url":"https://api.github.com/users/max8hine/followers","following_url":"https://api.github.com/users/max8hine/following{/other_user}","gists_url":"https://api.github.com/users/max8hine/gists{/gist_id}","starred_url":"https://api.github.com/users/max8hine/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/max8hine/subscriptions","organizations_url":"https://api.github.com/users/max8hine/orgs","repos_url":"https://api.github.com/users/max8hine/repos","events_url":"https://api.github.com/users/max8hine/events{/privacy}","received_events_url":"https://api.github.com/users/max8hine/received_events","type":"User","site_admin":false},"created_at":"2018-04-22T03:44:51Z","updated_at":"2018-04-22T03:44:51Z","author_association":"NONE","body":"Sorry to get back late.\r\n\r\nI think the <Inky> don't take children props.\r\n\r\n``` jsx\r\n<Inky>\r\n\t<Inky.Head>\r\n\t\t<link rel=\"stylesheet\" href=\"/styles/emails/index.css\"/>\r\n\t</Inky.Head>\r\n\t<Inky.Body>\r\n\t\t<Email />  // OK\r\n\t</Inky.Body>\r\n</Inky>\r\n```\r\n\r\n``` jsx\r\n<Inky>\r\n\t<Inky.Head>\r\n\t\t<link rel=\"stylesheet\" href=\"/styles/emails/index.css\"/>\r\n\t</Inky.Head>\r\n\t<Inky.Body>\r\n\t\t{this.props.children} // Error\r\n\t</Inky.Body>\r\n</Inky>\r\n```\r\n\r\n```\r\nInvariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.\r\n    at invariant (/Users/maxshine/Documents/workspace/express-react-email/node_modules/fbjs/lib/invariant.js:42:15)\r\n    at ReactDOMServerRenderer.render (/Users/maxshine/Documents/workspace/express-react-email/node_modules/react-dom/cjs/react-dom-server.node.development.js:2477:7)\r\n    at ReactDOMServerRenderer.read (/Users/maxshine/Documents/workspace/express-react-email/node_modules/react-dom/cjs/react-dom-server.node.development.js:2307:19)\r\n    at Object.renderToStaticMarkup (/Users/maxshine/Documents/workspace/express-react-email/node_modules/react-dom/cjs/react-dom-server.node.development.js:2690:25)\r\n    at View.renderFile [as engine] (/Users/maxshine/Documents/workspace/express-react-email/node_modules/express-react-views/index.js:68:32)\r\n    at View.render (/Users/maxshine/Documents/workspace/express-react-email/node_modules/express/lib/view.js:135:8)\r\n    at tryRender (/Users/maxshine/Documents/workspace/express-react-email/node_modules/express/lib/application.js:640:10)\r\n    at Function.render (/Users/maxshine/Documents/workspace/express-react-email/node_modules/express/lib/application.js:592:3)\r\n    at ServerResponse.render (/Users/maxshine/Documents/workspace/express-react-email/node_modules/express/lib/response.js:1008:7)\r\n    at module.exports (/Users/maxshine/Documents/workspace/express-react-email/routes/actions/home.js:52:14)\r\n```"}}
{"actor":{"display_login":"max8hine"}}