This commit is contained in:
Jessica
2018-11-30 20:35:04 +09:00
parent 0d6d7ce20f
commit c5bc70efc0
2 changed files with 12 additions and 15 deletions

View File

@@ -440,21 +440,21 @@ export class StyleSheetManager extends React.Component<
* The CSS prop is not declared by default in the types as it would cause 'css' to be present
* on the types of anything that uses styled-components indirectly, even if they do not use the
* babel plugin.
*
*
* You can load a default declaration by using writing this special import from
* a typescript file. This module does not exist in reality, which is why the {} is important:
*
*
* ```ts
* import {} from 'styled-components/cssprop'
* ```
*
*
* Or you can declare your own module augmentation, which allows you to specify the type of Theme:
*
*
* ```ts
* import { CSSProp } from 'styled-components'
*
* interface MyTheme {}
*
*
* declare module 'react' {
* interface Attributes {
* css?: CSSProp<MyTheme>

View File

@@ -783,15 +783,16 @@ function cssProp() {
return <div {...props} />;
}
const myCss = 'background: blue;';
const myCss = "background: blue;";
return (
<>
<div css="background: blue;" />
<div
// $ExpectError only strings work, objects crash the plugin
css={{ background: "blue" }}
/>
{/*
For some reason $ExpectError doesn't work on this expression.
Only strings work, objects crash the plugin.
<div css={{ background: "blue" }} />
*/}
<div
// would be nice to be able to turn this into an error as it also crashes the plugin,
// but this is how optional properties work in TypeScript...
@@ -805,7 +806,7 @@ function cssProp() {
/>
<div
// but this crashes the plugin, even though it's valid type-wise and we can't forbid it
css={css({ background: 'blue' })}
css={css({ background: "blue" })}
/>
<div
// this also crashes the plugin, only inline strings or css template tag work
@@ -827,10 +828,6 @@ function cssProp() {
`}
/>
<Custom css="background: blue;" />
<Custom
// $ExpectError only strings work, objects crash the plugin
css={{ background: "blue" }}
/>
<Custom css={undefined} />
<Custom
css={css`