/);
});
it('should generate files with global CSS', async () => {
@@ -52,6 +58,12 @@ describe('component', () => {
expect(
appTree.exists('libs/my-lib/src/lib/hello/hello.module.css')
).toBeFalsy();
+ expect(
+ appTree.read('libs/my-lib/src/lib/hello/hello.tsx').toString()
+ ).toMatch(/import '.\/hello.css'/);
+ expect(
+ appTree.read('libs/my-lib/src/lib/hello/hello.tsx').toString()
+ ).toMatch(/
/);
});
it('should generate files for an app', async () => {
diff --git a/packages/react/src/generators/component/files/__fileName__.module.__style__ b/packages/react/src/generators/component/files/__fileName__.module.__style__
index e69de29bb2d1d..204049cc27be0 100644
--- a/packages/react/src/generators/component/files/__fileName__.module.__style__
+++ b/packages/react/src/generators/component/files/__fileName__.module.__style__
@@ -0,0 +1,2 @@
+.container {
+}
\ No newline at end of file
diff --git a/packages/react/src/generators/component/files/__fileName__.tsx__tmpl__ b/packages/react/src/generators/component/files/__fileName__.tsx__tmpl__
index 0b2b3b519eff8..888205c789cbf 100644
--- a/packages/react/src/generators/component/files/__fileName__.tsx__tmpl__
+++ b/packages/react/src/generators/component/files/__fileName__.tsx__tmpl__
@@ -9,14 +9,19 @@ import { Route, Link } from 'react-router-dom';
<% if (hasStyles) {
if (styledModule && styledModule !== 'styled-jsx') {
var wrapper = 'Styled' + className;
+ var extras = '';
%>
import styled from '<%= styledModule %>';
<% } else {
var wrapper = 'div';
+ var extras = globalCss ? '' : " className={styles['container']}";
%>
- <%- style !== 'styled-jsx' ? globalCss ? `import './${fileName}.${style}';` : `import './${fileName}.module.${style}';`: '' %>
+ <%- style !== 'styled-jsx' ? globalCss ? `import './${fileName}.${style}';` : `import styles from './${fileName}.module.${style}';`: '' %>
<% }
-} else { var wrapper = 'div'; } %>
+} else {
+ var wrapper = 'div';
+ var extras = '';
+} %>
/* eslint-disable-next-line */
export interface <%= className %>Props {
@@ -31,7 +36,7 @@ const Styled<%= className %> = styled.div`
export class <%= className %> extends Component<<%= className %>Props> {
render() {
return (
- <<%= wrapper %>>
+ <<%= wrapper %><%- extras %>>
<%= styledModule === 'styled-jsx' ? `` : `` %>
Welcome to <%= className %>!
<% if (routing) { %>
@@ -47,7 +52,7 @@ export class <%= className %> extends Component<<%= className %>Props> {
<% } else { %>
export function <%= className %>(props: <%= className %>Props) {
return (
- <<%= wrapper %>>
+ <<%= wrapper %><%- extras %>>
<% if (styledModule === 'styled-jsx') { %><% } %>
Welcome to <%= className %>!
<% if (routing) { %>