0

Here is my interface for css (one component one myStyle.ts) : 

import IApp from "../../interfaces/global-interfaces";

export let myStyle: IApp.MyMinimumCssInterface = {

  display: "block",
  background: "#559d96",
  height: "100px",
  textAlign: "center",

};

I also need in myStyle.d.ts : 

 export let myStyle: string;

i also try : 

 export let myStyle: object;

 export let myStyle: {};

And everything work nice .

But when i wanna to change css i got :

TypeError: Attempted to assign to readonly property.

Make me crazy react .

Here is part of class : 

export class Header extends React.Component< HeaderI, HeaderStateI , any > {

    public myEvent = Services.CreateEvent(myEventList.iNeedSomeUpdate, {self: this} );
    public myRef: React.RefObject<HTMLDivElement>;
    public myDOM: Element | Text;

    constructor(args: any) {
        super(args);
        this.state = { enabledComponent : true,
                       visibility: true,
                       debugView: false,
                       background: args.background,
                       elements: [],
                    };

        myStyle.background = this.state.background;

        this.myRef = React.createRef();
        this.add = this.add.bind(this);

    }

This is render : 

  <div style={myStyle} ref={this.myRef} >

This is interface : 

declare namespace IApp {

   export interface MyMinimumCssInterface extends CSSProperties {
     display: string;
   }
Nikola Lukic
  • 4,001
  • 6
  • 44
  • 75
  • Isn't this export let myStyle: IApp.MyMinimumCssInterface = { --> export let myStyle = IApp.MyMinimumCssInterface{ ? – Hemadri Dasari Sep 04 '18 at 13:20
  • MyMinimumCssInterface is just for display prop in style. my class work with visible prop. i need it just for that. That part work fine. If i remove display ts compiler will port err msg.... – Nikola Lukic Sep 04 '18 at 16:46
  • I want to make changes and adapt to hmtl element ? My element all ready take css. Everything is all right except no modify options! I will try export let myStyle: string; to fix in object , this is ts vs react compiler compromise. I need clear situation in any aspect. – Nikola Lukic Sep 04 '18 at 16:54
  • export let myStyle: {}; OR export let myStyle: object is doesn't matter , always return err (readonly)! – Nikola Lukic Sep 05 '18 at 06:32
  • @NikolaLukic Take a look at this answer https://stackoverflow.com/a/44157035/12082336 – Darshan Jain Jan 16 '21 at 04:03

0 Answers0