Cannot assign to read only property 'backgroundColor' of object '#<Object>'

[priombiswas89]

I am trying to style the chart by taking help from the following demo:

https://codesandbox.io/s/2w93lvmqv0?file=/src/index.js:182-1455

But getting error. I am using config property. I am on version 0.4.3 but the demo above provided is on version 0.3.9. I am not sure whether the version update caused something. The error is as follows:

Uncaught TypeError: Cannot assign to read only property 'backgroundColor' of object '#<Object>'

Any kind of help would be much appreciated

[priombiswas89]

taskList:{//the right side task list title:{//The title od the task list label:"Projects",//The caption to display as title style:{backgroundColor: '#333333',borderBottom: 'solid 1px silver', color: 'white',textAlign: 'center'}//The style to be applied to the title }, task:{// The items inside the list diplaying the task style:{backgroundColor: '#fbf9f9'}// the style to be applied }, verticalSeparator:{//the vertical seperator use to resize he width of the task list style:{backgroundColor: '#333333',},//the style grip:{//the four square grip inside the vertical separator style:{backgroundColor: '#cfcfcd'}//the style to be applied } } },

This portion of css is actually causing this error, other styles are working fine, is there any library update needed?

[klimentina-djeparoska]

I have the same problem, did you manage to find any solution?

[hzm131]

如果你在config里传了taskList就会报这个错，原因我也不知道。我的做法是把项目拉下来，然后在lib/helpers/config/Config修改defvalues里taskList的信息。再打包项目，把dis目录里的index文件拿到自己的项目里去导入就可以了

[haZya]

Just put the config object inside the component itself.

[gyunhwan]

I was trying to imitate my superiors.
<TimeLine

          config={{
            ...config,
            taskList: {
              title: {
                label: 'work',
                style: {
                  fontSize: '20px',
                  backgroundColor: String('#40a9ff'),
                  borderBottom: 'solid 1px silver',
                  color: 'white',
                  textAlign: 'center',
                },
              },
              verticalSeparator: {
                style: { display: 'none' }, //the style
                grip: {
                  //the four square grip inside the vertical separator
                  style: { visbility: 'hidden' }, //the style to be applied
                },
              },
            },
          }}
        />