如何在TypeScript中使用Radium?

时间:2015-11-17 18:27:31

标签: reactjs typescript

应该很容易,但它让我感到厌烦:)我认为步骤是:

  • 生成.d.ts文件并引用它
  • import Radium
  • 装饰一个类

所以(这不起作用):

$_SERVER

基于一个不太简单的Github示例,我的定义文件是:

from my_app.models import Project
filters = get_filters(form)
ps = Project.objects.order_by('name').filter(filters)

但这可能已经过时了。所有帮助表示赞赏。

3 个答案:

答案 0 :(得分:0)

这是一个对我有用的简单声明。

declare module 'radium' {
  var Radium: ClassDecorator;
  export default Radium;
}

答案 1 :(得分:0)

我刚刚写了这个:

/// <reference path="../react/react.d.ts" />
declare function Radium(component: __React.ComponentClass<any>);
declare namespace Radium {

}

declare module 'radium' {
    export interface CssClass {
        [name: string]: CssProps;
    }
    interface StyleProps {
        rules?: CssClass;
        scopeSelector?: string;
    }
    interface CssProps {
        display?: string | number;
        opacity?: string | number;
        visibility?: string | number;
        zIndex?: string | number;
        orientation?: string | number;
        maxZoom?: string | number;
        minZoom?: string | number;
        userZoom?: string | number;
        zoom?: string | number;
        position?: string | number;
        top?: string | number;
        right?: string | number;
        bottom?: string | number;
        left?: string | number;
        flex?: string | number;
        flexGrow?: string | number;
        flexShrink?: string | number;
        flexBasis?: string | number;
        flexFlow?: string | number;
        flexDirection?: string | number;
        flexWrap?: string | number;
        justifyContent?: string | number;
        alignItems?: string | number;
        alignContent?: string | number;
        alignSelf?: string | number;
        order?: string | number;
        float?: string | number;
        clear?: string | number;
        boxSizing?: string | number;
        width?: string | number;
        minWidth?: string | number;
        maxWidth?: string | number;
        height?: string | number;
        minHeight?: string | number;
        maxHeight?: string | number;
        margin?: string | number;
        marginTop?: string | number;
        marginRight?: string | number;
        marginBottom?: string | number;
        marginLeft?: string | number;
        padding?: string | number;
        paddingTop?: string | number;
        paddingRight?: string | number;
        paddingBottom?: string | number;
        paddingLeft?: string | number;
        border?: string | number;
        borderWidth?: string | number;
        borderStyle?: string | number;
        borderColor?: string | number;
        borderTop?: string | number;
        borderTopWidth?: string | number;
        borderTopStyle?: string | number;
        borderTopColor?: string | number;
        borderRight?: string | number;
        borderRightWidth?: string | number;
        borderRightStyle?: string | number;
        borderRightColor?: string | number;
        borderBottom?: string | number;
        borderBottomWidth?: string | number;
        borderBottomStyle?: string | number;
        borderBottomColor?: string | number;
        borderLeft?: string | number;
        borderLeftWidth?: string | number;
        borderLeftStyle?: string | number;
        borderLeftColor?: string | number;
        borderRadius?: string | number;
        borderTopLeftRadius?: string | number;
        borderTopRightRadius?: string | number;
        borderBottomRightRadius?: string | number;
        borderBottomLeftRadius?: string | number;
        borderImage?: string | number;
        borderImageSource?: string | number;
        borderImageSlice?: string | number;
        borderImageWidth?: string | number;
        borderImageOutset?: string | number;
        borderImageRepeat?: string | number;
        borderTopImage?: string | number;
        borderRightImage?: string | number;
        borderBottomImage?: string | number;
        borderLeftImage?: string | number;
        borderCornerImage?: string | number;
        borderTopLeftImage?: string | number;
        borderTopRightImage?: string | number;
        borderBottomRightImage?: string | number;
        borderBottomLeftImage?: string | number;
        outline?: string | number;
        outlineWidth?: string | number;
        outlineStyle?: string | number;
        outlineColor?: string | number;
        outlineOffset?: string | number;
        clip?: string | number;
        overflow?: string | number;
        overflowX?: string | number;
        overflowY?: string | number;
        listStyle?: string | number;
        listStylePosition?: string | number;
        listStyleType?: string | number;
        listStyleImage?: string | number;
        tableLayout?: string | number;
        borderSpacing?: string | number;
        borderCollapse?: string | number;
        captionSide?: string | number;
        emptyCells?: string | number;
        columns?: string | number;
        columnWidth?: string | number;
        columnCount?: string | number;
        columnFill?: string | number;
        columnGap?: string | number;
        columnRule?: string | number;
        columnRuleWidth?: string | number;
        columnRuleStyle?: string | number;
        columnRuleColor?: string | number;
        columnSpan?: string | number;
        direction?: string | number;
        color?: string | number;
        font?: string | number;
        fontStyle?: string | number;
        fontVariant?: string | number;
        fontWeight?: string | number;
        fontSize?: string | number;
        lineHeight?: string | number;
        fontFamily?: string | number;
        fontSizeAdjust?: string | number;
        fontStretch?: string | number;
        textAlign?: string | number;
        textAlignLast?: string | number;
        textDecoration?: string | number;
        textEmphasis?: string | number;
        textEmphasisPosition?: string | number;
        textEmphasisStyle?: string | number;
        textEmphasisColor?: string | number;
        textIndent?: string | number;
        textJustify?: string | number;
        textOutline?: string | number;
        textOverflow?: string | number;
        textOverflowEllipsis?: string | number;
        textOverflowMode?: string | number;
        textSizeAdjust?: string | number;
        textTransform?: string | number;
        textWrap?: string | number;
        textShadow?: string | number;
        verticalAlign?: string | number;
        writingMode?: string | number;
        hyphens?: string | number;
        letterSpacing?: string | number;
        tabSize?: string | number;
        whiteSpace?: string | number;
        wordBreak?: string | number;
        wordSpacing?: string | number;
        wordWrap?: string | number;
        cursor?: string | number;
        navIndex?: string | number;
        navUp?: string | number;
        navRight?: string | number;
        navDown?: string | number;
        navLeft?: string | number;
        pointerEvents?: string | number;
        resize?: string | number;
        content?: string | number;
        counterIncrement?: string | number;
        counterReset?: string | number;
        quotes?: string | number;
        background?: string | number;
        backgroundColor?: string | number;
        backgroundImage?: string | number;
        backgroundRepeat?: string | number;
        backgroundAttachment?: string | number;
        backgroundPosition?: string | number;
        backgroundClip?: string | number;
        backgroundOrigin?: string | number;
        backgroundSize?: string | number;
        transition?: string | number;
        transitionProperty?: string | number;
        transitionDuration?: string | number;
        transitionTimingFunction?: string | number;
        transitionDelay?: string | number;
        animation?: string | number;
        animationName?: string | number;
        animationDuration?: string | number;
        animationTimingFunction?: string | number;
        animationDelay?: string | number;
        animationIterationCount?: string | number;
        animationDirection?: string | number;
        animationFillMode?: string | number;
        animationPlayState?: string | number;
        filter?: string | number;
        transform?: string | number;
        transformOrigin?: string | number;
        breakBefore?: string | number;
        breakInside?: string | number;
        breakAfter?: string | number;
        pageBreakBefore?: string | number;
        pageBreakInside?: string | number;
        pageBreakAfter?: string | number;
        orphans?: string | number;
        [name: string]: string | number;
    }
    export class Plugins { }
    export class Style extends __React.Component<StyleProps, any> { }
    export class StyleRoot { }
    export class getState { }
    export class keyframes { }
    export class __clearStateForTests { }
    export default Radium
}

答案 2 :(得分:0)

你需要这样做:

npm install --save-dev @types/react

在其中,有一个包含该类的接口CSSProperties。 使用它只是做:

const ContainerStyles = {
    base: {
        width: "500px",
        height: "350px",
        marginLeft: "auto",
        marginRight: "auto",
        backgroundColor: "red",
        opacity: 0.3,
        zIndex: 1
    } as CSSProperties
};

看到'as CSSProperties',它将确保所有自动完成工作。 现在您可以将它与Radium样式一起使用。

希望它有所帮助。